Valentin Cavel Valentin Cavel - 10 months ago 26
AngularJS Question

Why can't I use data-* as a directive's attribute name in AngularJS?

On the this plunker you can notice a strange behavior with the attribute name's pattern

in a directive.

The call :

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

of the directive :

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"

will take all the attributes of
into account but
and therefore display :

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

I am wondering why this happens (I wasted 4 hours before I figured out that it was the issue).

It seems to be impossible to name a directive
, why is that?

I read something about it here, is it why my attribute is undefined? It is simply not read by the browser?


The data- prefixed forms of directive names allow HTML validators to work because custom data attributes in HTML5 follow that form. AngularJS directive names are normalized as follows to support custom data attributes:

The normalization process is as follows:

  • Strip x- and data- from the front of the element/attributes.
  • Convert the :, -, or _-delimited name to camelCase.