有没有办法观察从角度世界外部触发的属性变化？

Question

我试图理解角度世界和非角度世界之间的相互作用.

给出一个声明如下的指令:

<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

修改模型,而不是直接更改视图.在link函数中,将初始属性值存储在范围变量中,如:

scope.myvalue = attrs.attr1;

然后你可以改变应用程序之外的值(使用上面对范围的引用),如:

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

这是一个小提琴

选项2

如果视图与jQuery的直接操作,我不知道有什么用途的$observe,$watch或分离的范围结合,将工作属性,因为它们都绑定到该属性表达式本身,只有一次,当链路功能第一次运行.更改该值将导致这些绑定失败.所以你必须拥有$watchDOM元素本身的属性(而不是通过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);
});

这是一个小提琴