如果在 angular 1.3+ 中使用一次性绑定，则指令中的观察者为零 [英] Zero watchers in directive if one-time binding is used in angular 1.3+

问题描述

我为这个问题做了一个user-name指令

.directive('userName', function($http) {返回 {限制:'E'，范围: {用户:'='},替换:真的，模板:'<div><span ng-bind="user.username"></span><a ng-if="user.active">添加</a></div>',};});

当我使用用户属性的一次性绑定(<user-name user="::user"></user-name>).

我有很多问题.我创建了这个plunker来测试我的指令.>

1. 为什么在 一次性绑定 的情况下，即使 user 不会更新，仍有观察者?
2. 在使用一次性绑定时，我可以在此指令中将观察者减少到零吗?
3. 我已阅读文档，我需要在链接函数中使用 $watch 来更新DOM - 对我来说似乎不是这种情况.什么时候需要在链接函数中使用 $watch?

解决方案

getWatchers 函数没有为观察者提供有意义的反馈(从作用域总结观察者也没有多大意义).你可以试试 $$postDigest 来监控这类事情.

无论如何，在指令链接后记录范围将立即提供更好的反馈.

如图所示，有三个观察者:

{isolateScope: Array[2], scope: Array[1]}

其中两个是 user.username 和 user.active:

<a ng-if="user.active">添加</a></div>

最后一个是{{$index}}:

将它们全部制作一次，应该为零.

<块引用>

链接函数什么时候需要$watch?

正如所说的那样，当 DOM 中没有数据绑定的内容必须在监视范围属性更新时更新.

$watch 与绑定相比提供了大量的控制，例如一次性观察者的秘诀是

 var unwatch = scope.$watch('oneTime', function (newVal, oldVal) {不看()；...});

并且可以将其更改为一旦定义了变量就停止观看".

也可以用来观看范围外的东西

scope.$watch(function () { return globalVar }, function () { scope.scopeVar = ... });

I have made a user-name directive for this question

.directive('userName', function($http) {
  return {
    restrict: 'E',
    scope: {
      user: '='
    },
    replace: true,
    template: '<div><span ng-bind="user.username"></span> <a ng-if="user.active">Add</a></div>',
  };
});

It is important that the directive uses a minimal number of watches when I use one-time binding af the user attribute (<user-name user="::user"></user-name>).

I have a number of questions. I have created this plunker to test my directive.

1. Why is there watchers in the one-time-binding case even though user will not update?
2. Can I get down to zero watchers in this directive when using one-time binding?
3. I have read in the documentation that I need a $watch in a link function to update the DOM - this doesn't seem to be the case for me. When is $watch necessary in the link function?

解决方案

getWatchers function doesn't provide meaningful feedback on watchers (summing up the watchers from scopes doesn't make much sense also). You can try $$postDigest instead to monitor this kind of things.

Anyway, logging the scope from the directive after it was linked will give better feedback instantly.

As it shows, there are three watchers:

{isolateScope: Array[2], scope: Array[1]}

Two of them are user.username and user.active:

<div><span ng-bind="user.username"></span> <a ng-if="user.active">Add</a></div>

And the last one is {{$index}}:

<li ng-repeat="user in users" id="user_a_{{$index}}">

Make them all one-time, and there should be zero.

When is $watch necessary in the link function?

Exactly as it was said, when something in the DOM that doesn't have data binding has to be updated when watched scope property is updated.

$watch gives a good amount of control when compared to bindings, e.g. the recipe for one-time watcher is

  var unwatch = scope.$watch('oneTime', function (newVal, oldVal) {
     unwatch();
     ...
  });

And it can be changed to something like 'stop watching as soon as the variable is defined'.

It can also be used for watching the stuff outside the scope

scope.$watch(function () { return globalVar }, function () { scope.scopeVar = ... });

这篇关于如果在 angular 1.3+ 中使用一次性绑定，则指令中的观察者为零的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！