有没有办法查看从AngularJS世界外部触发的属性更改？

Question

我正在尝试了解Angular世界和非Angular世界之间的相互作用。

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

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

如果超出角度的代码以这种方式更改指令：

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

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

Answer 1

最好改为在指令中进行此更改。如果由于某种原因无法做到这一点，那么有两种选择。

在应用程序外部，获取对应用程序中任何DOM元素的引用。使用该引用，然后可以获取对其范围的引用。您可以将元素与id一起使用d1。例如：

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

这里有几个选择：

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

scope.myvalue = attrs.attr1;

然后，您可以在应用程序外部更改值（使用上述对范围的引用），例如：

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

这是一个jsfiddle

选项2

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

这是一个jsfiddle