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之外，因为这与我的路由有关并且运行正常。但我理解指令模板应该按原样呈现。我错过了什么吗？

exampleText在ui-view外部，这与我的路由有关且工作正常。但是，据我了解，指令模板应该原封不动地呈现。我有遗漏什么吗？

- Prometheus

Answer 1

使用一个名为：

app.directive("exampleText", ...

HTML应该是：

<example-text></example-text>

来自文档：

Angular会将元素的标签和属性名称规范化以确定哪些元素与哪些指令匹配。我们通常使用大小写敏感的驼峰式规范化名称（例如ngModel）引用指令。但是，由于HTML不区分大小写，我们在DOM中使用小写形式引用指令，通常在DOM元素上使用破折号分隔的属性（例如ng-model）。

- tasseKATT

---

我很抱歉听到你浪费了两个小时的时间，哈哈，非常感谢！那就是问题所在。 - Prometheus

只是需要注意一点，例如文本失败了，但 exampletext 成功了。它也不喜欢“-”，这正常吗？ - Prometheus

你是否将指令名称保留为“exampleText”？那么在你的HTML中，“example-text”应该可以工作。 - tasseKATT

非常感谢！我浪费了三个小时在那上面！！ - danywalls

两个小时在这里。太棒了。 - James O'Toole

哦，我的天啊，花了这么多时间！ - Bernardo Dal Corno

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

- klode