AngularJS directive not recognised when starting with data-*

Question

I'm new to AngularJS. Need some help with the directive I created. This is My HTML:

<data-table template-url="dataTable.html" info="someData"></data-table>

I get "someData" from server in my controller - directive.js:

app.directive('dataTable', function() {
 return{
    restrict: 'E',
    scope: {
        data : '=info'
    },
    link: function($scope,elem,attrs){
         ///some code here.
    },
    templateUrl : function(elem, attrs) {
        return attrs.templateUrl;
    }
});

The issue is when I debug my code, it come to the directive by doesn't go inside. (I used javascript debug in chrome). Is there anything I'm missing. The restrict Tag is proper, name is correct what else is needed? I did look at the similar questions but couldn't find any solution. Here is a fiddle : Demo

Answer 1

You can't use directive names starting with data-* because its reserved by AngularJS ng core namespaces. Just use an other name to start with and you will be fine.

<my-data-table template-url="dataTable.html" info="someData"></my-data-table>

And your directive:

myApp.directive('myDataTable', function() {
  return {
    scope: {
      data: '=info'
    },
    link: function($scope, elem, attrs) {
      ///some code here.
      console.log(attrs.templateUrl);
    },
    templateUrl: function(elem, attrs) {
       return attrs.templateUrl;
    }
  }
});