不同浏览器中AngularJS属性插值的顺序

I spotted that directive attributes are interpolated in different order in Chrome and FF (also IE). So for example this directive will produce different result in Chrome as in FF:

我发现，在Chrome和FF中，指令属性是按照不同的顺序插入的。例如，这个指令会产生不同的结果，如在FF中:

var TestDirective = function () {

    var linkFn = function (scope, element, attrs) {

        attrs.$observe("att1", function () {
            $(element).append(attrs.att1);  
        });

        attrs.$observe("att2", function () {
            $(element).append(attrs.att2);  
        });

        attrs.$observe("att3", function () {
            $(element).append(attrs.att3);    
        });       
    };

    return {
        link: linkFn
    }
};

In general this behaviour is not problematic but there are cases where order of interpolation is important. My question is not how to overcome that and what is a reason for different order of interpolation?

一般来说，这种行为没有问题，但在某些情况下，插值的顺序很重要。我的问题不是如何解决这个问题以及不同插值顺序的原因是什么?

There is also working JSFiddle. If it is opened in Chrome and FF (or IE) the result will be different.

还有一个工作的JSFiddle。如果在Chrome和FF(或IE)中打开，结果就会不同。

1 个解决方案

#1

I expect Angular is looping through the attributes on the elements in the order they appear in the attributes map on the Element instance. Since that map is unordered, the order of iteration is not determined and is up to the implementation of the browser.

我希望通过元素实例上的属性映射中出现的顺序，角循环遍历元素的属性。由于映射是无序的，所以迭代的顺序不是确定的，而是取决于浏览器的实现。

Remember that Angular works by comparing the state of your model against the DOM, so the order in which you're setting the attributes in your MyCtrl function doesn't come into it. It's the order in which the attribute changes are detected.

记住，angle是通过比较模型的状态和DOM来工作的，所以在MyCtrl函数中设置属性的顺序不会出现。它是检测到属性更改的顺序。

This suspicion would tend to be borne out by the fact that this code lists the attributes in the same order as you see them handled by Angular (321 on Firefox, 123 on Chrome):

这种怀疑可能会被以下事实所证实:这段代码列出的属性的顺序与你看到的角(火狐321,Chrome 123)处理的属性的顺序相同:

(function() {
    var elm = document.getElementById("theSpan");
    var attrs = elm.attributes;
    var index;
    var item;
    for (index = 0; index < attrs.length; ++index) {
        item = attrs[index];
        if (item.nodeName.substring(0, 3) === "att") {
            display(String(index) + ": " +
                    item.nodeName + "=" +
                    item.nodeValue);
        }
    }

    function display(msg) {
        var p = document.createElement('p');
        p.innerHTML = String(msg);
        document.body.appendChild(p);
    }
})();

Fiddle

小提琴

That's not definitive proof, but it's a strong indication Angular is doing something similar when comparing differences.

这不是决定性的证据，但这是一个强烈的指示，角度在比较差异时做了类似的事情。

#1