javascript AngularJS 指令模板未呈现
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20166495/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS Directive template not rendering
提问by Prometheus
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:
在我的 index.html 我有这个：
<div class="container" ng-app="customerPortalApp">
<div ui-view></div>
<exampleText></exampleText>
</div>
exampleTextis outside my ui-viewas thats to do with my routes and works correctly. But its my understanding the directive template should render as is. Have I missed something?
exampleText不在我的范围内ui-view，这与我的路线有关并且工作正常。但我的理解是指令模板应该按原样呈现。我错过了什么吗？
回答by tasseKATT
With a directive named:
使用名为的指令：
app.directive("exampleText", ...
HTML should be:
HTML 应该是：
<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).
Angular 规范化元素的标签和属性名称，以确定哪些元素匹配哪些指令。我们通常通过区分大小写的驼峰命名规范化名称（例如 ngModel）来引用指令。然而，由于 HTML 不区分大小写，我们以小写形式引用 DOM 中的指令，通常在 DOM 元素上使用破折号分隔的属性（例如 ng-model）。
回答by klode
As tasseKATT noted the directive name should stay as "exampleText"
and the html element should be <example-text>
正如 tasseKATT 指出的，指令名称应保持为“exampleText”，而 html 元素应为 <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>'
};
});
