javascript AngularJS 指令不显示模板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24078366/
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 not displaying the template
提问by iJade
Here is my AngularJs directive. Its' expected to show the div in the template but it shown nothing while the code is run.
这是我的 AngularJs 指令。它希望在模板中显示 div，但在代码运行时它什么也没显示。
Here is the html
这是html
<div ng-app="SuperHero">
<SuperMan></SuperMan>
</div>
Here is the AngularJS directive
这是 AngularJS 指令
var app = angular.module('SuperHero',[]);
app.directive('SuperMan',function(){
return{
restrict:'E',
template: '<div>Hello fromt Directive</div>'
}
});
And here is the demo
这是演示
回答by Joseph Callaars
When you declare your directive you used the name SuperMan, however this is wrong. You should use superManas that will be translated to super-manas the element.
当您声明指令时，您使用了 name SuperMan，但是这是错误的。您应该使用superManas 将被转换super-man为元素。
Any capital letter in the directive name will translate to a hyphen, as capital letters are not used in elements. For example myDirectivewill translate to my-directive.
指令名称中的任何大写字母都将转换为连字符，因为元素中不使用大写字母。例如myDirective将转换为my-directive.
As mentioned by others, AngularJS uses normalisation the following normalisation rules:
正如其他人提到的，AngularJS 使用规范化以下规范化规则：
Strip x- and data- from the front of the element/attributes. Convert the :, -, or _-delimited name to camelCase.
从元素/属性的前面去除 x- 和 data-。将 :、- 或 _ 分隔的名称转换为驼峰式命名法。
JavaScript:
JavaScript：
var app = angular.module('SuperHero',[]);
app.directive('superMan',function(){
return{
restrict:'E',
template: '<div>Hello fromt Directive</div>'
}
});
HTML:
HTML：
<div ng-app="SuperHero">
<super-man></super-man>
</div>
I updated your fiddle to match the correct syntax here jsfiddle.
我更新了你的小提琴以匹配这里jsfiddle的正确语法。
回答by alonisser
Angular normalizes directives names- using camelCase in the directive and dash seperated (usually) since html isn't case sensitive, in the template.
Angular规范化指令名称- 在指令中使用驼峰命名，并在模板中使用短划线分隔（通常），因为 html 不区分大小写。
so where you need to call the directive namedsuperManwith:
所以你需要调用指令命名superMan为：
<super-man></super-man>
Here is a working Demo
这是一个工作演示
回答by edi9999
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).
The normalization process is as follows:
Strip x- and data- from the front of the element/attributes. Convert the :, -, or _-delimited name to camelCase.
Angular 规范化元素的标签和属性名称，以确定哪些元素匹配哪些指令。我们通常通过区分大小写的驼峰命名规范化名称（例如 ngModel）来引用指令。然而，由于 HTML 不区分大小写，我们以小写形式引用 DOM 中的指令，通常在 DOM 元素上使用破折号分隔的属性（例如 ng-model）。
归一化过程如下：
从元素/属性的前面去除 x- 和 data-。将 :、- 或 _ 分隔的名称转换为驼峰式命名法。
You should have a camelCase name for your directive: eg superMan, and use one of the following syntax to call your directive, as HTML is case-insensitive:
您的指令应该有一个驼峰命名法：例如superMan，并使用以下语法之一来调用您的指令，因为HTML 不区分大小写：
<super-man></super-man>
<super_man></super_man>
<super:man></super:man>
<SuPer_man></sUpEr_mAn> //HTML is case Insensitive
