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?

Answer 1

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

Answer 2

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>'
    };
});