2016-10-19 6 views
0

要素の属性の順序は、htmlでの順序にもかかわらず変更できます(FF 43.0.1のみ)。例:FFに続いChromeでスニペットを実行しFFの新しいバージョンが入力の属性の順序を変更しました

<input type="checkbox" data-type="can-be-also-empty"/>

してください。デベロッパーツールから

結果:

<input data-type="can-be-also-empty" type="checkbox"/> - FF

<input type="checkbox" data-type="can-be-also-empty"/> - クローム

これは角使用して影響を受けることができます。 Custom directives guide

は角要素のタグを正規化し、次のように正規化処理が

ディレクティブれた要素の一致を決定するために属性名:ストリップxおよびDATA-の要素の正面から/属性。

data-type atributesがdata-を除去し、それがtype="can-be-also-empty"からtype="checkbox"に影響を与える角度、要素に最初に行く場合、私は、考える理由厥。

次のスニペットは、私が何を意味するか、より良い表示することができます:

angular.module('app', []).directive('example', function(){ 
 
    return { 
 
    template: '<input type="checkbox" data-type="eny-value" ng-model="value"/><p>{{value}}</p>', 
 
    restrict: 'E', 
 
    link: function($scope){ 
 
     $scope.value = false; 
 
    } 
 
    } 
 
})
<!DOCTYPE html> 
 
<html ng-app='app'> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title></title> 
 
</head> 
 
<body> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script> 
 
    <example></example> 
 
</body> 
 
</html>

もFFとChromeでそれを実行しようとすると、式はFFでevaluetedされることはありません。

data-type="eny-value"の前に移動する次のステップtypeの前に。今はどのブラウザでも動作していません。

+3

属性の順序は – adeneo

+0

@adeneo、FF用のバージョンを確認、私はしてください@kickenいずれかのブラウザ – rossoneri

+0

の角度の例との最後のコードスニペットを実行、それが必要ください問題ではないはずbe 43.0.1 – kicken

答えて

1

この問題は、AngularJSがディレクティブとどのように一致するかによって発生します。この特定のケースでは、約input[checkbox]です。一致するのはtypeです。 AngularJS docs for directivesによれば、typedata-typeの両方から一致させることができるので、属性の順序に応じてデータ型を角度正規化すると、以前の値(別名checkbox)を上書きします。

この動作により、input[checkbox]は期待どおりに動作しないため、ngModelはチェックフィールドの値を受け取ることはありません。

anglejsの正規化と一致する属性は使用しないでください。

+0

deteiled answerのおかげでありがたいことに、私は解決策がatributesに同じ名前を使用することではないことに同意します – rossoneri

関連する問題