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

问题描述

我已针对此问题做出了 user-name 指令

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

当我使用user属性(<用户名user =":: user">;</用户名> ).

我有很多问题.我创建了 此导航键 来测试我的指令.

1. 为什么一次性绑定情况下会有观察者，即使 user 不会更新?
2. 使用一次性绑定时，我可以在此指令中使用零观察者吗?
3. 我已经阅读了文档，我需要在链接函数中使用$ watch进行更新DOM-对我而言似乎并非如此.链接功能何时需要$ watch?

解决方案

getWatchers 函数不能为观察者提供有意义的反馈(从作用域中总结观察者也没有多大意义).您可以尝试使用 $$ postDigest 来监视这种情况.

无论如何，在链接了指令之后，从指令中记录作用域会立即给出更好的反馈.

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

  {isolateScope:Array [2]，范围:Array [1]} 

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

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

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

 < li ng-repeat =用户中的用户" id ="user_a _ {{$ index}}"> 

一次性全部添加，应该为零.

链接功能何时需要$ watch?

确切地说，当观看范围属性更新时，必须更新DOM中没有数据绑定的内容.

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

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

它可以更改为在定义变量后立即停止观看"之类的东西.

它也可以用来观看示波器之外的东西

  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屋！