有没有一种方法可以监视从AngularJS之外触发的属性更改？
我试图理解角世界和非角世界之间的相互作用。
给出一个如下声明的指令：
<dir1 id="d1" attr1="100"/>如果angular外部的代码以这种方式更改指令：
$("#d1").attr("attr1", 1000);指令如何知道它的一个属性已经改变？
回答 2
Stack Overflow用户
发布于 2013-06-18 10:43:24
最好是在指令中进行此更改。如果，无论出于什么原因，这是不可能的，那么有几个选择。
在应用程序外部，获取对应用程序内任何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或与属性的隔离范围绑定是否有效，因为它们都绑定到属性表达式本身，只在第一次运行链接函数时绑定一次。更改该值将导致这些绑定失败。因此，您必须对DOM元素本身执行$watch属性(而不是通过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);
});Stack Overflow用户
发布于 2014-06-21 03:59:44
使用Web组件库，如x-tags by Mozilla或Polymer by Google。此选项不会在每次属性更改时大量调用$scope.$apply。
我使用x-tag是因为它们支持更广泛的浏览器。在定义新的自定义标记(指令)时，您可以将选项lifecycle.attributeChanged设置为回调函数，该函数将在每次参数更改时触发。
The official docs不是很有帮助。但通过反复试验和深入代码，我设法找出了它是如何工作的。
回调函数的上下文( this对象)就是元素本身。属性已更改的对象。回调可以接受三个参数：
name-属性的名称，oldValueandnewValue-它们不言而喻。
所以现在，进入正题：
代码
这将监视属性的更改：
xtag.register('dir1', {
lifecycle: {
attributeChanged: function (attribute, changedFrom, changedTo) {
// Find the element's scope
var scope = angular.element(this).scope();
// Update the scope if our attribute has changed
scope.$apply(function () {
if (attribute == 'attr1') scope.style = changedTo;
});
}
}
});attributeChanged回调仅在参数的值实际发生变化时触发。要获得它们的初始值，您需要手动扫描批次。最简单的方法似乎是在定义指令时：
myApp.directive('dir1', function () {
return {
... ,
link: function (scope, element, attributes) {
scope.attr1 = element[0].getAttribute('attr1');
}
};
});https://stackoverflow.com/questions/17159652
复制相似问题
腾讯云开发者
