为什么 $scope.getList() 在 $scope.showList 的状态变化时被调用？

Question

在下面的代码中，

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

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

$scope.getList() 在 $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

您可以在 showList 变量值更改时使用观察器或观察事件。

Answer 2

首先，你的问题有点不对。 $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 对象，并且您没有明确告诉框架您的视图模型中的某些内容已更改（就像您通过在模型中调用 set() 方法所做的那样）其他框架，例如 Backbone 或 Ember) – angular 必须检查所有变量并重新运行所有可能改变视图外观的函数，以及ng-include 就是其中之一。

为什么 $scope.getList() 在 $scope.showList 的状态变化时被调用？

Why $scope.getList() gets invoked on state change of $scope.showList?

javascript

angularjs

angularjs-digest