Angular 和 Watchers 中的单向或一次性绑定 [英] One-Way or One-Time binding in Angular and Watchers
问题描述
当您在 AngularJS 中具有只读输入文本框时，我有一个关于如何避免观察者的问题.
I have a question about how to avoid watchers when you have readonly input textbox in AngularJS.
我为它创建了 plunker:plunker 链接:OneWay Binding using ng-value
I have created plunker for it : plunker link : OneWay Binding using ng-value
这表明即使我将 ng-value 用于只读输入文本，仍然为它添加了一个观察者.
This shows that even when I am using ng-value for readonly input text, still a watcher has been added for it.
我只是想在有只读控件时避免观察者，我之所以这么问是因为在我的企业应用程序中，即使对于只读页面，我也有超过 200 个只读控件和观察者计数，大约有 1100 个，这会减慢我的速度角度应用.
I simple want to avoid watchers when there are readonly controls, I am asking this because in my enterprise application, even for readonly page I have more-than 200 readonly controls and watcher count there is coming around 1100 which is slowing down my Angular Application.
推荐答案
找到了一种使用单向绑定的方法:
Found a way to do it with one way bindings:
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>尝试按获取观察者"，看到观察者计数最初是 3.然后写一些东西或复制/粘贴到第一个输入中，然后再次按获取观察者".瞧，观察者计数减少到 2，因为第二个输入上的一次绑定在获得值时被评估，然后移除了它的观察者.
Try pressing "Get Watchers" and see that the watcher count is initially 3. Then write something or copy/paste into the first input and press "Get Watchers" again. Voila the watcher count decreased to 2 because the one time binding on the second input got evaluated when it got a value and it then removed its watcher.
这篇关于Angular 和 Watchers 中的单向或一次性绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
