AngularJS Directive template not rendering

Question

I have a simple directive that just displays some text for now:

app.directive("exampleText", function() {
    return {
        restrict: "E",
        template: '<div>hello!</div>'
    }

});

In my index.html I have this:

<div class="container" ng-app="customerPortalApp">
  <div ui-view></div>
  <exampleText></exampleText>
</div>

exampleText is outside my ui-view as thats to do with my routes and works correctly. But its my understanding the directive template should render as is. Have I missed something?

tasseKATT · Accepted Answer · 2015-12-28 08:19:32Z

52

With a directive named:

app.directive("exampleText", ...

HTML should be:

<example-text></example-text>

From documentation:

Angular normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).

edited Dec 28, 2015 at 8:19

answered Nov 23, 2013 at 19:01

tasseKATT

38.5k8 gold badges87 silver badges67 bronze badges

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

2 Comments

Prometheus Over a year ago

just a word of note tho. example-text failed but exampletext worked. it also did not like the - is that normal?

tasseKATT Over a year ago

Did you leave the directive name as "exampleText"? Then "example-text" should work in your html.

klode · Accepted Answer · 2014-05-11 01:06:58Z

3

As tasseKATT noted the directive name should stay as "exampleText" and the html element should be <example-text>

I thought a demo may help demo

the template:

<div ng-app="myApp">
    <sample-text></sample-text>
</div>

the directive:

var app = angular.module('myApp', []);
app.directive('sampleText', function () {
    return {
        restrict: "E",
        template: '<div>Some sample text here.</div>'
    };
});

edited May 11, 2014 at 1:06

answered Nov 23, 2013 at 21:11

klode

11.1k6 gold badges38 silver badges49 bronze badges

Collectives™ on Stack Overflow

AngularJS Directive template not rendering

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related