Question

我需要了解AngularJS如何处理给定范围的范围变量和方法部分。

以下是我的控制器代码

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

app.controller('MainCtrl', ["$scope", function($scope) {
  $scope.name = "";

  $scope.getNameLength = function(){
    return $scope.name.length;
  }
}]);

这是我的html主体（为了简单起见，只保留我的div）

<body ng-controller="MainCtrl">
    <div>
      Enter Your Name :<input type="text" ng-model="name">
      <br>
      {{ "Your entered name whoes length is = " + getNameLength() }}
    </div>
  </body>

当我在文本框中输入内容时，调用getNameLength()并更新DOM以反映name的长度。

只要指令中引用的方法，只要名称发生更改，就会调用该方法。

这是我的疑问： 为什么只要视图模型发生变化，就会调用范围内的所有方法（在指令中引用）？是否可以禁用此行为？这有什么性能影响吗？

Answer 1

如果您担心Angular会多次调用您的方法并且您想限制执行，则可以始终使用ngModelOptions指令并传递去抖动。您可以看到文档 on the AngularJS page 。例如：

<input type="text" ng-model="name" ng-model-options="{debounce: 500}">

只有在模型停止更新500毫秒后才会更新模型。您还可以使用ng-model-options="{updateOn: 'blur'}"之类的内容仅在字段失去焦点后更新模型。

就性能而言，如果它像计算字符串的长度一样简单，那么你不必担心太多。如果它更复杂，你可能会遇到问题。

Answer 2

为什么角度调用范围内的所有方法（正在进行只要视图模型发生变化，在指令中引用？

我没有在您的示例中看到自定义指令，但Angular指令将从其父级继承范围属性，使用父范围或具有隔离范围。

如果您没有隔离范围，它将在父范围内查找该属性，除非您覆盖它。

因为你有一个Angular表达式（{{和}}围绕它），Angular会为表达式中的任何内容创建一个观察者。当它检测到监视变量或对象已更改时，它将更新依赖于它的所有内容。

是否可以禁用此行为？

是的，的确，正如你所提及的那样。在对您的问题的评论中，您可以使用一次性绑定＆＃39;。

示例：

{{normalBinding}} 
{{::oneTimeBinding}}

这有什么性能影响吗？

是的，您拥有的绑定越多，观察者越多，摘要周期越多，您的应用程序反映更改所需的时间就越长。这是大型应用程序的一个问题。

有关范围和观察者的更多信息，请访问here。

AngularJS范围模型和范围方法

2 个答案: