我正在尝试了解Angular世界和非Angular世界之间的相互作用。
给定一个这样声明的指令:
<dir1 id="d1" attr1="100"/>
如果超出角度的代码以这种方式更改指令:
$("#d1").attr("attr1", 1000);
指令如何知道其属性之一已更改?
最好改为在指令中进行此更改。如果由于某种原因无法做到这一点,那么有两种选择。
在应用程序外部,获取对应用程序中任何DOM元素的引用。使用该引用,然后可以获取对其范围的引用。您可以将元素与id一起使用d1。例如:
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
如果视图与jQuery的直接操作,我不知道有什么用途的$observe,$watch或分离的范围结合,将工作属性,因为它们都绑定到该属性表达式本身,只有一次,当链路功能第一次运行。更改值将导致这些绑定失败。因此,您必须$watch将属性设置为DOM元素本身(而不是通过attrs):
$observe
$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); });