Angular和Watchers中的单向或一次绑定

时间:2015-12-03 16:18:35

标签: angularjs performance angular-ngmodel angularjs-ng-value

当你在AngularJS中只读输入文本框时,我有一个关于如何避免观察者的问题。

我为它创建了plunker:plunker link : OneWay Binding using ng-value

这表明即使我使用ng-value作为只读输入文本,仍然会添加一个观察者。

我想简单地想要在有只读控件时避免观察者,我问这是因为在我的企业应用程序中,即使对于只读页面,我有超过200个只读控件和观察者计数,大约1100,这会减慢我的速度角度应用。

1 个答案:

答案 0 :(得分:0)

通过单向绑定找到了一种方法:



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

app.controller('MainCtrl', function($scope) {
  
//$scope.watcherCount = 0;
$scope.countWatchers = function () {
    var root = angular.element(document).injector().get('$rootScope');
    var count = root.$$watchers ? root.$$watchers.length : 0; // include the current scope
    var pendingChildHeads = [root.$$childHead];
    var currentScope;
    
    while (pendingChildHeads.length) {
        currentScope = pendingChildHeads.shift();

        while (currentScope) {
            count += currentScope.$$watchers ? currentScope.$$watchers.length : 0;
            pendingChildHeads.push(currentScope.$$childHead);
            currentScope = currentScope.$$nextSibling;
        }
    }

    $scope.watcherCount = count;
    
    // alert("there are " + count  + " watchers");
    return count;
  }
});

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <input type="text" ng-model="a">
    <input type="text" value="{{::a}}" ng-readonly=true></input>
    <button ng-click="countWatchers()">Get Watchers</button>
    <br>
    Watcher Count <!--table><tr></tab><td bo-text="watcherCount"></td></tr></table-->
    <span>{{watcherCount}}</span>
    
  </body>

</html>
&#13;
&#13;
&#13;

尝试按&#34; Get Watchers&#34;并且看到观察者计数最初是3.然后写一些东西或复制/粘贴到第一个输入并按下&#34; Get Watchers&#34;再次。瞧,观察者数量减少到2,因为第二个输入的一次性绑定在得到一个值时被评估,然后移除了观察者。