在$ watch中使用$ apply

Question

我有一个非隔离范围指令。 我不想隔离它，因为它需要与其他指令一起位于元素上。 但是，我需要观看有关范围的项目。 所以我尝试了这个：

scope.$watch(function() {
     return scope.$apply(attrs.myAttribute);
}, function(val) {
     return val ? doSomething():doSomethingElse();
});

这是行不通的，因为角度抛出一个摘要循环已在进行中错误。 所以我的问题是，如何使用非隔离指令动态观察范围内的项目。

谢谢，

Answer 1

如果项目已经在范围内，则不能完全确定您在观看项目时遇到的困难。 您能详细说明一下吗？ 无论如何，这里有两种解决方案应涵盖几乎所有情况。 要观看属性更改，请注意以下事项...

scope.$watch(function() {
    return elem.attr('my-attribute');
}, function(n, o) {
    if(n) 
        console.log(n);
});

JSFiddle Link-观看属性演示

---

但是，我怀疑您很难在范围内获得该项目。 如果是这样，这是一种通过$observe分配它的方法，然后从那里观看它而没有隔离...

attrs.$observe('myAttribute', function(value) {
    scope.myValue = value;
});

scope.$watch('myValue', function(n, o) {
    if(n) 
        console.log(n);
});

JSFiddle Link-通过$observe观看属性演示

Answer 2

你不想调用$apply一个内部$watch回调，因为scope.$watch内部调用$apply于你，这就是为什么你所得到的错误“正在进行中的错误已经消化周期”。

相反，您可以简单地执行以下操作：

scope.$watch(attrs.myAttribute, function(val){
  return val ? doSomething() : doSomethingElse();
};

设置为myAttribute的表达式将根据指令所在元素的范围进行评估，因为正如您提到的那样，它不是孤立的。 当返回值更改时，将调用回调函数。

例如，如果您的HTML看起来像这样

<div myNoNewScopeDirective myAttribute="doThis(value)"></div>

doThis(value)将针对与div元素关联的范围进行评估，并且其返回值将由myNoNewScopeDirective 。 结果，对该值的任何更改将触发您提供的回调，并且当val为true时，将调用doSomething 。