AngularJS。防止更新$范围内的所有数据

我是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>

来源

2017-05-06 Ddd

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

但是，你所做的并不是一个好习惯，因为当你在视图中将函数作为表达式绑定时，角度不会“知道”何时应该更新视图中的表达式，因此它会更新它在每一个消化周期都发生很多！几乎每次用户与视图进行交互（单击，滚动）或者如果控制器端的任何内容发生更改，您都可能发现自己以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/（我无法创建堆栈段，因为它没有角1.3这个地方将来是拳推出）

我与编辑此@MaximShoustin评论说，更清晰和总结更好正常之间的差异结合和一次结合：

ng-bind或{{}}生成一个观察者，它会每次消化周期之后被解雇。上另一方面，::表达式创建观察者并取消一次值不为undefined

对不起，不以英语为母语:(

来源

2017-05-06 21:08:37

'NG-bind'或'{{}}'生成一个观察者和它将在每个摘要循环后被触发。另一方面，'::'表达式创建观察者并在值不是undefined时取消它。 –

@MaximShoustin谢谢 –

AngularJS。防止更新$范围内的所有数据

回答

相关问题