[英]AngularJS directive not displaying the template
这是我的AngularJs指令。 它''希望在模板中显示div,但在代码运行时它没有显示任何内容。
这是html
<div ng-app="SuperHero">
<SuperMan></SuperMan>
</div>
这是AngularJS指令
var app = angular.module('SuperHero',[]);
app.directive('SuperMan',function(){
return{
restrict:'E',
template: '<div>Hello fromt Directive</div>'
}
});
这是演示
当您声明您的指令时,您使用了名称SuperMan
,但这是错误的。 您应该使用superMan
,因为它将被转换为super-man
作为元素。
指令名称中的任何大写字母都将转换为连字符,因为元素中不使用大写字母。 例如, myDirective
将转换为my-directive
。
正如其他人所提到的,AngularJS使用以下规范化规则进行规范化:
从元素/属性的前面剥离x-和数据。 将:, - 或_分隔的名称转换为camelCase。
JavaScript的:
var app = angular.module('SuperHero',[]);
app.directive('superMan',function(){
return{
restrict:'E',
template: '<div>Hello fromt Directive</div>'
}
});
HTML:
<div ng-app="SuperHero">
<super-man></super-man>
</div>
我更新了你的小提琴,以匹配正确的语法jsfiddle 。
Angular规范化元素的标记和属性名称,以确定哪些元素与哪些指令匹配。 我们通常通过其区分大小写的camelCase规范化名称(例如ngModel)来引用指令。 但是,由于HTML不区分大小写,我们通过小写形式引用DOM中的指令,通常使用DOM元素上的划线分隔属性(例如ng-model)。
规范化过程如下:
从元素/属性的前面剥离x-和数据。 将:, - 或_分隔的名称转换为camelCase。
你的指令应该有一个camelCase名称:例如superMan
,并使用以下语法之一来调用你的指令,因为HTML不区分大小写 :
<super-man></super-man>
<super_man></super_man>
<super:man></super:man>
<SuPer_man></sUpEr_mAn> //HTML is case Insensitive
演示: http : //jsfiddle.net/QUP97/3/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.