理解Angularjs范围_Angularjs_Scope

理解Angularjs范围

angularjs

理解Angularjs范围,angularjs,scope,Angularjs,Scope,我在angularjs范围内工作，我回答了一个有趣的问题。我有以下html结构： <body ng-app='myApp'> <div ng-controller='myCtrl'> <select ng-model='selectedOption' ng-options='option.size for option in options' ng-change='upda

我在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;
  };

});

当我运行代码并从下拉列表中选择一个选项时，控制台将记录第一个控制器的$id“003”。为什么在“更新”函数中我无法获取第二个控制器的作用域？有办法得到它吗

这里有一个指向JSbin的链接：

您可以，但是您需要在第二个ng controller=myCtrl块中调用update函数

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

在您的特定情况下，ng controller创建的两个作用域将是同级的

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

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

或者通过调用update方法：

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

太好了，我现在就知道了。谢谢，太棒了！不要忘记接受答案，然后单击答案投票控件下方的勾号图标，如果对您有帮助，请向上投票。欢迎来到StackOverflow！：-

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