2017-05-06 5 views
1

私はAngularの初心者です。質問があります。
私が気づいたのは、(ビュー上でレンダリングする)1つの変数だけが変更されていても、すべてのスコープデータがビュー上に更新されていることです(私はそうですか?それは普通ですか?私が大量のデータを表示していて、データが変更されている場合にのみ更新したい場合例えば

コード(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> 

答えて

1

それは正常ですか? - あなたはそれが普通だと思う、これは全体のアイデアです。

しかし、ビュー内の式として関数をバインドすると、角度がビュー内の式を更新する必要があることを「知っていない」ため、更新されるため、適切な方法はありませんすべてのダイジェストサイクルでそれはたくさん起こります!ほとんどの場合、ユーザーはビュー(クリック、スクロール)とやりとりするたびに、またはコントローラ側で何かが変更された場合は、this errorで終わる可能性があります。

ビューにプロパティをバインドする必要があります。は、関数ではありません。

:例:あなたは一度だけビュー でプロパティをバインドする必要がを知って 場合、あなたはを結合1時間を使用することができることを

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を持っていないので、私はスタック・スニペットを作成できませんでした)

ng-bind{{}} 1つのウォッチャーを生成し、それが各ダイジェストサイクルの後に解雇された:より明確であり、通常のの違いは結合1時間を結合し、良くまとめ@MaximShoustinコメント。一方、::発現は、ウォッチャーを作成し、値がないundefined

申し訳ありませんが、英語のネイティブスピーカー:(

+1

'NG-bind'または' {{}}が '1つのウォッチャーを生成しない一度に解除します一方、 '::'式はwatcherを作成し、値が 'undefined 'でなければ取り消します。 –

+0

@ MaximShoustinありがとう –

関連する問題