¿Por qué no puedo usar data- * como nombre de atributo de una directiva en AngularJS?

En el t su plunker puede observar un comportamiento extraño con los data-* patrón del nombre del atributo- data-* en una directiva.

La llamada :

 <body ng-app="apptest" ng-controller="Controller"> Test of data named attribute : <br/> <directivetest data-test="vartest" test="vartest" another-test="vartest"></directivetest> </body> 

de la directiva:

 angular.module('apptest', []) .controller('Controller', ['$scope', function($scope) { $scope.vartest = "This is a test"; } ]) .directive('directivetest', function() { return { restrict: 'E', scope: { dataTest: '=', test: '=', anotherTest: '=' }, templateUrl: "directive.html" } }); 

tomará en count todos los attributes de directivetest , pero data-test y por lo tanto mostrará:

 Test of data named attribute : Attribute with data-* name : Attribute with regular name : This is a test Attribute with an other regular name : This is a test 

Me pregunto por qué sucede esto (perdí 4 horas antes de darme count de que era el problema).

Parece imposible nombrar una directiva de data-* , ¿por qué es eso?

Leí algo al respecto aquí http://www.w3schools.com/tags/att_global_data.asp , ¿por qué mi atributo no está definido? Simplemente no es leído por el browser?

Las forms prefijadas de data- de los nombres de directivas permiten que los validadores de HTML funcionen porque los attributes de datos personalizados en HTML5 siguen ese formulario. Los nombres de la directiva AngularJS se normalizan de la siguiente manera para admitir los attributes de datos personalizados:

El process de normalización es el siguiente:

  • Tira x- y data- del frente del elemento / attributes.
  • Convierta el nombre : - , o _ -delimited en camelCase.

Angular automáticamente normaliza los attributes. Cosas como data-test="..." , x-test="..." y test="..." se consideran iguales. Debe elegir una forma de escribir sus attributes personalizados y atenerse a ella; no mezclar y combinar.

Esto se debe a que la tira angular x- y los datos del frente del elemento / attributes. Por lo tanto, en su caso tiene dos attributes llamados test y uno sobrescribe el otro. He bifurcado tu plunker como ejemplo: Plunker

 <directivetest data-foo="vartest" test="vartest" another-test="vartest"></directivetest> scope: { foo: '=', test: '=', anotherTest: '=' }