Question

在下面的代码中，

        <label>
            <input type="checkbox" ng-model="showList">
            Show unordered list
        </label>

        <ng-include src="getList()"></ng-include>

通过选中或取消选中$scope.getList()来调用{p> $scope.showList，其中使用$scope.showList，

app3.controller('gListCtrl', function($scope){
    $scope.getList = function(){
        return $scope.showList ? "ulgrocerylist.html" : "grocerylist.html";
    };
});

为什么在$scope.getList()的状态更改时调用$scope.showList？

类似的代码，

        <p>
            <button ng-disabled="disableButton">Button</button>
        </p>

        <p>
            <input type="checkbox"
                    ng-model="disableButton">DisableButton
        </p>

对我有意义，因为disableButton状态正在发生变化，因此按钮会因双向绑定而被禁用或启用。

Answer 1

首先，你的问题有点不对劲。 $scope.getList()函数不仅会在状态更改时调用，而且会在每个摘要周期调用。让我解释一下。

因为框架绝对不知道getList函数中的代码是什么。它没有静态地分析你的代码，因为它既非常难以且非常有用。由于您可以如何使用AngularJS的性质，您可以根据完全不同的控制器，服务，范围等中的变量更改getList的输出。因此，可能需要在每次输出时重新输出此输出消化周期。 AngularJS认识到这一点，因为你在模板中有函数调用并在每个摘要上调用它来检查是否需要交换模板。

考虑这个应用程序结构：

<div ng-app="testTest">
  <script type="text/ng-template" id="template.html">
    <div>Hello world!</div>
  </script>
  <div ng-controller="templateViewer">
    <div>
      <div ng-include="content()"></div>
    </div>
  </div>
  <div ng-controller="templateChanger">
    <button ng-click="handleClick()">Show / hide content</button>
  </div>
</div>

和这个代码连接它：

var app = angular.module('testTest', []);
app.factory('template', function() {
  return {
    show: false
  };
});
app.controller('templateChanger', function($scope, template) {
  $scope.handleClick = function() {
    // toggle showing of template
    template.show = !template.show;
  };
});
app.controller('templateViewer', function($scope, template) {
  // if the result of this function is not re-evaluated on every digest cycle,
  // Angular has no idea whether to show or hide the template.
  $scope.content = function() {
    return template.show ? 'template.html' : '';
  };
});

因此，框架需要依赖于对HTML中模板绑定的属性和函数的不断重新评估。由于您使用的所有数据结构都是普通的javascript对象，并且您没有明确告诉框架您的viewmodel中的某些内容已经更改（就像您在其他框架中调用模型上的set()方法一样）作为Backbone或Ember） - angular必须检查所有变量并重新运行可能改变视图外观的所有函数，ng-include就是其中之一。

Answer 2

您可以使用观察者或观察事件对showList变量值的更改。

为什么$ scope.getList（）在$ scope.showList的状态更改时被调用？

2 个答案: