AngularJS指令模板无法渲染

Question

我有一个简单的指令，现在只显示一些文本：

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就像我的路由一样正常工作。 但我理解指令模板应该按原样呈现。 我错过了什么吗？

Answer 1

使用指令命名：

app.directive("exampleText", ...

HTML应该是：

<example-text></example-text>

来自文档 ：

Angular规范化元素的标记和属性名称，以确定哪些元素与哪些指令匹配。 我们通常通过其区分大小写的camelCase规范化名称（例如ngModel）来引用指令。 但是，由于HTML不区分大小写，我们通过小写形式引用DOM中的指令，通常使用DOM元素上的划线分隔属性（例如ng-model）。

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