AngularJS 以数据开头时无法识别指令-*

Question

我是 AngularJS 的新手。在我创建的指令方面需要一些帮助。这是我的 HTML:

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

我从控制器中的服务器获取 "someData" - 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;
    }
});

问题是当我调试我的代码时，它到达了指令 by doesn't go inside。（我在 chrome 中使用了 javascript 调试）。有什么我想念的吗？ restrict 标签正确，名称正确，还需要什么？我确实看过类似的问题，但找不到任何解决方案。这是一个 fiddle ：Demo

Answer 1

您不能使用以 data-* 开头的指令名称，因为它已被 AngularJS ng core namespaces 保留。 只需使用其他名称即可从开始，你会没事的。

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

你的指令：

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;
    }
  }
});

AngularJS 以数据开头时无法识别指令-*

AngularJS directive not recognised when starting with data-*

html

javascript

angularjs

angular-directive