Question

我正在研究angularjs范围，我反驳了一个有趣的问题。我有以下html结构：

<body ng-app='myApp'>
      <div ng-controller='myCtrl'> 
        <select ng-model='selectedOption'
                ng-options='option.size for option in options'
                ng-change='update(selectedOption)'></select>
      </div>

      <div ng-controller='myCtrl'>
        <ul>
          <li ng-repeat='asset in assets'>
            {{asset}}
          </li>
        </ul>
      </div>
   </body>

请注意，我有两个名为'myCtrl'的控制器。

以下是我的javascript代码：

var myApp = angular.module('myApp', []);

myApp.factory('Assets', function() {
  return {
    assets: [{test:1}]
  };
});

myApp.controller('myCtrl', function($scope, Assets, $rootScope) {

  $scope.assets = Assets.assets;

  var temp = [
    {test:5},
    {test:6},
    {test:7}
  ];

  $scope.options = [
    {size: 1},
    {size: 2},
    {size: 3},
    {size: 4}
  ];
  $scope.selectedOption = $scope.options[0];

  $scope.update = function(value) {

    console.log($scope.$id);

    /*for(var i = 1; i < value.size; i=i+value.size) {
      $scope.assets.push({
        test: value.size
      });
    }*/

    $scope.assets = temp;
  };

});

当我运行代码并从下拉列表中选择一个选项时，控制台将记录'003'，这是第一个控制器的$ id。为什么在'更新'功能内部我无法获得第二个控制器的范围？有办法搞定吗？

以下是JSbin的链接：http://jsbin.com/gecizuwaku/2/edit?html,js,console,output

Answer 1

你可以，但你需要调用第二个update()块内的ng-controller="myCtrl"函数。

ng-controller大致工作的方式是它创建了它所在元素范围的子范围。然后它实例化控制器函数，解析所有依赖关系并将它们传递给这个新的子范围$scope。这意味着每个ng-controller实例将创建一个新的控制器函数实例，并提供新的子范围。

在您的特定情况下，ng-controller创建的两个范围将是兄弟姐妹。

您可以通过在开发者控制台中运行以下内容来查看第二个范围$id：

angular.element('ul').scope().$id

或者通过调用update()方法：

angular.element('ul').scope().update()

会将$id记录到控制台。它可能是下一个顺序ID，在您的情况下将是“004”。

了解Angularjs范围

1 个答案: