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

【问题标题】：Order of AngularJS attributes interpolations in different browsers不同浏览器中 AngularJS 属性插值的顺序
【发布时间】：2014-01-11 04:19:54
【问题描述】：

我发现指令属性在 Chrome 和 FF（也是 IE）中以不同的顺序插入。因此，例如该指令将在 Chrome 中产生与 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
    }
};

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

还有工作JSFiddle。如果在 Chrome 和 FF（或 IE）中打开，结果会有所不同。

【问题讨论】：

HTML 中的属性没有排序？
并不是说它们没有被订购。在 Chrome 中，结果总是123，在 FF 中总是321。所以我的问题是结果不同的原因是什么？
如果你使用 vanilla javascript 而不是 3rd 方库会发生什么？
以某种方式克服它不是问题。更重要的是，我想知道AngularJS这种行为的原因是什么。
是的..我的意思是插值。见docs.angularjs.org/guide/directive - 搜索$observe。

标签： javascript angularjs cross-browser

【解决方案1】：

我希望 Angular 会按照它们在 Element 实例上的 attributes 映射中出现的顺序循环遍历元素上的属性。由于该映射是无序的，因此迭代的顺序是不确定的，取决于浏览器的实现。

请记住，Angular 的工作原理是将模型的状态与 DOM 进行比较，因此您在 MyCtrl 函数中设置属性的顺序不会出现在其中。这是检测到属性更改的顺序。

这种怀疑往往会被以下事实证明：该代码以您看到的 Angular 处理属性的相同顺序列出属性（Firefox 上为 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

这不是明确的证据，但强烈表明 Angular 在比较差异时正在做类似的事情。

【讨论】：