2

我发现指令属性在 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）中打开，结果会有所不同。

4

1 回答 1

3

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

请记住，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);
    }
})();

小提琴

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

于 2013-05-06T12:52:51.410 回答