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。防止更新$範圍內的所有數據

回答

相關問題