Angular：指令代码不呈现模板

Question

我只是克隆了angular seed项目并添加了一个指令，如下所示：

    .directive('dataGrid',function(){
    return{
        restrict: 'E',
        template : '<h1>HHHIII</h1>'
    }
})

但是当我使用指令<data-grid></data-grid>时，不会显示HTML内容。任何人都可以指出我失踪的东西吗？

当我在浏览器中检查页面时，这就是我所看到的

<div ng-view="" class="ng-scope">
  <data-grid class="ng-scope"></data-grid>
</div>

Answer 1

问题是指令的名称。前缀data-用于HTML5自定义属性。重命名您的指令应该可以解决问题。

Answer 2

data-是保留名称。 Angular通过HTML5标准忽略它。 通过在dataGrid前加上自定义字符串作为前缀，它开始工作：

app.directive('testDataGrid',function(){
  return{
      template: '<h1>HHHIII</h1>'
  }
});

<test-data-grid></test-data-grid>