在不同瀏覽器中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屬性插值的順序

回答

相關問題