从 data-* 开始时无法识别 AngularJS 指令答案

【问题标题】：AngularJS directive not recognised when starting with data-*从 data-* 开始时无法识别 AngularJS 指令
【发布时间】：2017-09-03 20:27:18
【问题描述】：

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

问题是当我调试我的代码时，它没有进入指令。（我在 chrome 中使用了 javascript 调试）。有什么我想念的吗。限制标签是正确的，名称是正确的还需要什么？我确实看过类似的问题，但找不到任何解决方案。这是一个小提琴：Demo

【问题讨论】：

我认为指令的语法是错误的。
你能指出错误/我犯错误的地方吗？ @HJz
templateUrl 应该是一个字符串，因此，您的指令可能已加载，但它只是找不到模板。
我在 return 语句的指令内放置了一个断点。它不只是进来。并且该函数返回一个字符串，即 attrs.templateUrl （是一个字符串）。
请创建一个演示

标签： javascript html angularjs angular-directive

【解决方案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;
    }
  }
});

【讨论】：

你能解释一下为什么会这样吗？我认为使用驼峰表示法来命名衍生词是可以的，例如 ngRepeate 或任何其他。
@Iin 我之前在元素名称中也使用过 - 并且效果很好。
当然不用担心，你节省了我很多时间。