角：指令码不使所述模板

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>