Angular : Directive code not rendering the template

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>

check if directive is added to main module - angular won't report errors for unknown directives — csharpfolk
– csharpfolk, Commented Feb 28, 2016 at 18:03
OK I see you added directive inside ng-view, thats the problem, put directive usage inside one of the views that is rendered eg. view1 — csharpfolk
– csharpfolk, Commented Feb 28, 2016 at 18:06

Torsten Scholz · Accepted Answer · 2016-02-28 18:06:03Z

4

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

answered Feb 28, 2016 at 18:06

Torsten Scholz

8661 gold badge9 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jaka Konda · Accepted Answer · 2016-02-28 18:06:35Z

0

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>

answered Feb 28, 2016 at 18:06

Jaka Konda

1,4363 gold badges17 silver badges36 bronze badges