有没有办法查看从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();

这里有几个选项：

选项1

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

scope.myvalue = attrs.attr1;

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

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

Here is a fiddle

选项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);
});

Here is a fiddle

Answer 2

使用Web Components库，例如x-tags by Mozilla或Polymer by Google。该选项在每次属性更改时都不会意外调用$scope.$apply。

我使用x标签是因为它们对浏览器的支持范围更广。在定义新的自定义标签（指令）时，您可以将选项lifecycle.attributeChanged设置为回调函数，该函数将在每次对参数[进行触发时触发。The official docs并不是很有帮助。但是通过反复试验并深入研究代码，我设法找出了它的工作原理。

回调函数的上下文（this对象）是元素本身。属性已更改的一个。回调可以使用三个参数：

name –属性名称，
• oldValue和
• [newValue –这些代表自己说话。
• 所以现在，开始做生意：

代码

这将监视属性的更改：

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回调仅在参数的值实际为
change

时触发。要获取其initial值，您需要手动扫描批次。最简单的方法似乎是在定义指令时：

myApp.directive('dir1', function () {
    return {
        ... ,
        link: function (scope, element, attributes) {
            scope.attr1 = element[0].getAttribute('attr1');
        }
    };
});