javascript - 以 data-* 开头时无法识别 AngularJS 指令

Question

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

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

我在我的 Controller - directive.js 中从服务器获取“someData”:

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 并没有进入。 (我在 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;
    }
  }
});