Шаблон директивы AngularJS не отображается

У меня есть простая директива, которая теперь просто отображает текст:

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

});

В моем index.html у меня есть это:

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

exampleText находится за пределами моего ui-view, поскольку это касается моих маршрутов и работает правильно. Но его мое понимание шаблона директивы должно отображаться как есть. Я что-то пропустил?

Ответ 1

С директивой с именем:

app.directive("exampleText", ...

HTML должен быть:

<example-text></example-text>

Из документации:

Angular нормализует тег элемента и имя атрибута для определения какие элементы соответствуют этим директивам. Обычно мы ссылаемся на директивы по их регистрозаменному имени camelCase с учетом регистра (например, ngModel). Однако, поскольку HTML нечувствителен к регистру, мы ссылаемся на директивы в DOM по нижним регистрам, обычно используя атрибуты с разделителями тире на элементах DOM (например, ng-model).

Ответ 2

Поскольку tasseKATT отметил, что название директивы должно оставаться как "exampleText" и элемент html должен быть <example-text>

Я думал, что демо может помочь демо

шаблон:

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

директива:

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