javascript - 有没有办法观察 AngularJS 世界之外触发的属性变化？

Question

我正在尝试理解 Angular 世界和非 Angular 世界之间的交互。

给定一个这样声明的指令:

<dir1 id="d1" attr1="100"/>

如果 Angular 之外的代码以这种方式更改指令:

$("#d1").attr("attr1", 1000);

指令如何知道其属性之一已更改？

Answer 1

最好在指令内进行此更改。如果出于某种原因这是不可能的，那么有几个选择。

在应用程序外部，获取对应用程序内任何 DOM 元素的引用。使用该引用，您可以获得对其范围的引用。您可以使用 id 为 d1 的元素。例如:

var domElement = document.getElementById('d1');
var scope = angular.element(domElement).scope();

这里有几个选项:

选项 1

修改模型而不是直接更改 View 。在链接函数中，将初始属性值存储在范围变量中，例如:

scope.myvalue = attrs.attr1;

然后您可以更改应用程序外部的值(使用上面对范围的引用)，例如:

scope.$apply(function(){
    scope.myvalue = 1000;
    console.log('attribute changed');
});

Here is a fiddle

选项 2

如果直接使用 jQuery 操作 View ，我不知道是否使用 $observe、$watch 或绑定(bind)到该属性的隔离范围会起作用，因为它们都绑定(bind)到属性表达式本身，仅在链接函数首次运行时绑定(bind)一次。更改该值将导致这些绑定(bind)失败。因此，您必须$watch DOM 元素本身的属性(而不是通过attrs):

scope.$watch(function(){         
    return $(el).attr('attr1');    // Set a watch on the actual DOM value
}, function(newVal){
    scope.message = newVal;
});

然后您可以更改应用程序外部的值(使用上面对范围的引用)，例如:

scope.$apply(function(){
    $("#d1").attr("attr1",1000);
});

Here is a fiddle