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

我发现指令属性在Chrome和FF（也是IE）中以不同顺序插补。因此，例如，该指令将在Chrome中产生不同的结果，作为FF：在不同浏览器中AngularJS属性插值的顺序

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）中打开，结果将会不同。

来源

2013-05-06 PrimosK

HTML中的属性只是没有排序？ – Bergi 2013-05-06 12:44:09

不是他们没有订购。在Chrome中，结果始终是'123'，FF始终是'321'。所以我的问题是结果不同的原因是什么？ – PrimosK 2013-05-06 12:46:08

如果使用vanilla javascript而不是第三方库，会发生什么情况？ – Xotic750 2013-05-06 12:47:17

我期待Angular按照它们在Element实例上的attributes映射中出现的顺序遍历元素上的属性。由于该映射是无序的，所以迭代次序没有确定并且取决于浏览器的实现。

请记住，Angular通过比较您的模型与DOM的状态来工作，因此您在MyCtrl函数中设置属性的顺序不会进入它。这是检测属性更改的顺序。

这种猜疑往往会通过的事实，这个代码列出在同一顺序的属性，你看到他们的角度（321在Firefox，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在比较差异时做了类似的事情。

来源

2013-05-06 12:52:51

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

回答

相关问题