了解Angularjs范围

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>

请注意，我有2个具有相同名称“ 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

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

ng-controller大致起作用的方式是，它在其所在元素的作用域内创建一个子作用域。 然后，它实例化控制器功能，解析所有依赖项并将它们与新的子作用域$scope一起传入。 这意味着每个ng-controller实例将使用提供的新子作用域创建控制器功能的新实例。

在您的特定情况下， ng-controller创建的两个范围将是同级。

您可以通过在开发人员控制台中运行以下命令来查看第二个作用域的$id ：

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

或通过调用update()方法：

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

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