angularjs - Angular 等待父 Controller

Question

我有一个 Angular 应用程序和几个模块。
正如您在下面看到的，我在 mod2 的 mod1template.html 中调用了一个指令。
myvar 在 mod1Ctrl 中获取值
但是 angular 首先初始化子项，然后 myvar 在 mod2 的 Controller 中显示为空。
当我用谷歌搜索时，有一些解决方案，但对我的情况没有任何帮助。
当父项和子项都是指令但我的 mod1 没有任何指令时，预发布链接适用。
我不想将参数作为属性传递

我的情况还有其他解决方案吗？

mod1template.html:
<div>
<mod2-dir></mod2-dir>
</div>

angular.module("angApp.mod1", ["ngRoute"])
    .config(["$routeProvider", "$locationProvider", function ($routeProvider, $locationProvider) {
        $routeProvider.when("/:myvar1/:myvar2\\_:id", {
            templateUrl: "Angular/mod1template.html",
            controller: "mod1Ctrl"
        });

    }])
    .controller("mod1Ctrl", ["$routeParams", "$scope", "mod1DataService", function ($routeParams, $scope, mod1DataService) {
        $scope.myvar = mod1DataService.myvar;
        }

angular.module("angApp.mod2", ["ngRoute"])
    .directive("mod2Dir", function () {
        return {
            restrict: "E",
            templateUrl: "Angular/mod2template.html",
            controller: "mod2Ctrl"
        };
    })
    .controller("mod2Ctrl", ["$scope", function ($scope) {
        alert($scope.myvar.Id);
        }

Answer 1

您可以在您的情况下使用 $broadcast。当 $scope.myvar 值改变时，watch 会触发广播事件，它会被它的子作用域监听。

angular.module("angApp.mod1", ["ngRoute"])
    .config(["$routeProvider", "$locationProvider", function ($routeProvider, $locationProvider) {
        $routeProvider.when("/:myvar1/:myvar2\\_:id", {
            templateUrl: "Angular/mod1template.html",
            controller: "mod1Ctrl"
        });

    }])
    .controller("mod1Ctrl", ["$routeParams", "$scope", "mod1DataService", function ($routeParams, $scope, mod1DataService) {
        $scope.myvar = mod1DataService.myvar;
        //asuming that service call is ajax that's why placing watch on on myvar
        $scope.$watch('myvar', function(newVal, oldVal){
          if(newVal != oldVal)
             $scope.$broadcast('parentControllerLoaded',newVal); //no need to use broadcast event using $rootScope
        },true);
    }



angular.module("angApp.mod2", ["ngRoute"])
    .directive("mod2Dir", function () {
    return {
       restrict: "E",
       templateUrl: "Angular/mod2template.html",
       controller: "mod2Ctrl"
   };
})
.controller("mod2Ctrl", ["$scope", function ($scope) {
    $scope.$on('parentControllerLoaded',function(event, data){
        alert(data.id);
        //you can directly access parent scope from here.
        //alert($scope.$parent.myvar.Id)
    });
}