角度嵌套控制器范围继承问题

时间:2015-02-02 10:28:30

标签: angularjs angularjs-scope

我有一些奇怪的问题在这里我已经在我的主控制器中声明了一个范围数据,并且可以在除了我刚刚制作的子控制器之外的每个其他控制器中访问它,当我记录/使用$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>

1 个答案:

答案 0 :(得分:1)

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

如果要继承父控制器范围,则应在视图上创建控制器的嵌套结构。你可以像这样重构你的html smth:

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

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

我已经为您创建了 JSFiddle 示例。

2)您也可以使用解析对象解决此问题。

例如:

.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才显示此路由,您只需使用注入控制器的user对象。

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