Angular 嵌套控制器作用域继承问题

Question

我在这里遇到了一些奇怪的问题我已经在我的主控制器中声明了一个范围数据并且可以在除了我刚制作的这个子控制器之外的所有其他控制器中访问它，当我log/use $scope.user 在 child controller 中的值为 undefined

主控制器

(function(){
    angular.module('app.ctrls', []);
        var app = angular.module('app.ctrls');
        app.controller('mainCtrl', ["$scope", function($scope){
            $scope.user = {
                name:"John Doe",
                id: 4
            };
    }]);
})();

子控制器

(function(){
    var app = angular.module("app.ctrls");
    app.controller("childCtrl", ["$scope", function($scope){
        console.log($scope.user);
    }]);
})();

路线

var app = angular.modules("app.configs");
    app.config(['$routeProvider', '$locationProvider', function ( 
    $routeProvider, $locationProvider ) {
        $routeProvider
        .when('/settings/basic_info', {
            templateUrl: 'basic_info_settings.html',
            controller: 'childCtrl',
            title: 'Basic Info - Settings | Knoweldge First'
        })
}]);

查看

<div ng-controller="mainCtrl" ng-view> 

</div>

Answer 1

1) 此问题与您的 html 结构有关。

如果你想继承父级的控制器范围，你应该在视图上创建你的控制器的嵌套结构。您可以像这样重组您的 html smth：

<div ng-controller="MainCtrl">
    <div ng-view></div>
</div>

在这种情况下 angular 会知道，每个新控制器的范围都应该从父控制器的范围继承。

我已经用相同的案例为您创建了 JSFiddle 示例。

2) 您也可以使用 resolve 对象来解决这个问题。

例如：

.when('/settings/basic_info', {
            templateUrl: 'basic_info_settings.html',
            controller: 'childCtrl',
            resolve: {
               user: function(userService){
                  return userService.getUser();
               }
            }
        })

其中 userService:

app.factory("messageService", function($http){
    var factory = {
       getUser: function() {
          var promise = $http({ 
              method: 'GET', 
              url: 'api/user'
          })
          .success(function(data) {
              return data;
          });
          return promise;
       }
    };
    return factory;
});

Angular 仅当所有 promises 都将得到解决并且您可以只使用注入到控制器中的 user 对象时才显示此路由。

app.controller("childCtrl", ["$scope", user, function($scope, user){
     $scope.user = user;
}]);

Angular 嵌套控制器作用域继承问题

Angular Nested Controller Scope Inheritance Problem

angularjs

angularjs-scope