Angular：指令代碼未呈現模板

Question

我只是克隆了有角的種子項目並添加了一條指令，如下所示：

    .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>