Angular：指令代码未呈现模板

Question

I simply cloned the angular seed project and added a directive as shown below:

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

But when I use the directive <data-grid></data-grid> the HTML content is not displayed. Can any one point out what I'm missing ?

And when I inspect the page in browser, here is what I see

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

Answer 1

The problem is the name of the directive. The prefix data- is used for HTML5 custom attributes. Renaming your directive should solve the problem.

Answer 2

data- is reserved name. Angular ignores it by HTML5 standard. By prefixing dataGrid with custom string it started working:

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

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