Question

我是Angular的新手，我有一个问题我注意到，角度更新视图上的所有范围数据（我是对的吗？），即使它只更改了一个变量（在视图上呈现）。这是正常的吗？如果我在视图上有大量数据并且只想在更改数据时更新它，该怎么办呢？

代码例如（每次执行scope.word时，函数func正在执行）：

    <div ng-app="myApp" ng-controller="myCtrl">
        Word: <input ng-model="word">
        {{func()}}
    </div>

    <script>
      var app = angular.module('myApp', []);
      app.controller('myCtrl', function($scope) {
         $scope.word = "John Doe";
         $scope.func = function(){
         alert("Who dared to disturb me !? >(");
       };
   });
   </script>

Answer 1

这是正常的吗？ - 你打赌这是正常的，这是整个想法。

你正在做的事情根本不是一个好习惯，因为当你在视图中将一个函数绑定为表达式时，angular不会“知道”何时应该更新视图中的表达式，所以它会更新它每个消化周期都会发生很多！几乎每次用户与视图交互（单击，滚动）或控制器端的任何内容都发生了变化，因此您可能会发现自己最终只有this error。

您应该将属性绑定到视图，不是函数。例如：

angular.module('app',[]).controller('ctrl', function($scope) {
  $scope.welcomeMessage = "Hi, welcome to AngularJS!";
  
  $scope.updateMessage = function(message) {
    $scope.welcomeMessage = message;
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <strong>{{ welcomeMessage }}</strong>
  
  <hr>
  
  
  <input type="text" ng-model="msg">
  <button ng-click="updateMessage(msg)">Update Message</button>
</div>

请注意，如果知道您需要在视图中绑定一次属性，那么您可以使用一次性绑定：

  <strong>{{ ::welcomeMessage }}</strong>

或

  <strong ng-bind="::welcomeMessage"></strong>

通过向表达式添加::，可以防止角度在第一次绑定到视图后跟踪此表达式，并且不会再次更新它，在控制器上更改了它的事件，这是适合您的应用程序的性能，并可以显着改善它们。

以下是一次性绑定的一个工作示例：https://jsfiddle.net/hu9zcbwh/2/（我无法创建stack-snippet，因为它没有角度1.3，这个未来是第一次引入的）

我正在使用更明确的@MaximShoustin评论编辑此内容，并更好地总结普通绑定和一次绑定之间的差异：

ng-bind或{{}}会生成一个观察者，并会在每个摘要周期后触发。另一方面，::表达式创建观察者并在值不是undefined

时取消它

对不起，不是以英语为母语的人:(

AngularJS。阻止更新$ scope中的所有数据

1 个答案: