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>

来自documentation：

Angular规范化元素的标记和属性名称以确定哪些元素匹配哪些指令。我们通常会提到它们区分大小写的camelCase规范化名称的指令（例如 ngModel）。但是，由于HTML不区分大小写，我们参考 DOM中的指令通过小写形式，通常使用 DOM元素上的破折号分隔属性（例如ng-model）。

Answer 2

由于tasseKATT注意到指令名称应保留为“exampleText” 并且html元素应该是<example-text>

我认为演示可能有所帮助 demo

模板：

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

AngularJS指令模板无法渲染

2 个答案: