Javascript AngularJS指令不显示模板

这是我的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>'
    }
});

var-app=angular.module（'SuperHero'，[]）；
应用指令（'超人'，函数（）{
返回{
限制：'E'，
模板：“Hello fromt指令”
}
});

---

这是当你声明你的指令时，你使用了超人的名字，但是这是错误的。您应该使用

superMan

，因为这将被转换为

superMan

元素

指令名称中的任何大写字母都将转换为连字符，因为元素中不使用大写字母。例如，

myDirective

将转换为

myDirective

正如其他人所提到的，AngularJS使用标准化-以下标准化规则：

从元素/属性的前面剥离x和数据。转换 以“：、-”或_”分隔的名称为camelCase

JavaScript:

var app = angular.module('SuperHero',[]);
app.directive('superMan',function(){
    return{
        restrict:'E',
        template: '<div>Hello fromt Directive</div>'
    }
});

var-app=angular.module（'SuperHero'，[]）；
应用指令（'超人'，函数（）{
返回{
限制：'E'，
模板：“Hello fromt指令”
}
});

HTML:

我更新了你的提琴以匹配这里的正确语法。

角度-在指令中使用camelCase，在模板中使用破折号分隔（通常），因为html不区分大小写

因此，您需要在哪里调用名为

superMan

与：

这里有一个正在工作的

Angular规范化元素的标记和属性名称以确定 哪些元素与哪些指令匹配。我们通常指 指令的大小写敏感名称（例如。 ngModel）。然而，由于HTML不区分大小写，我们参考 通过小写形式在DOM中执行指令，通常使用 DOM元素上以破折号分隔的属性（例如ng模型）

规范化过程如下所示：

从元素/属性前面剥离x-和数据。转换 camelCase的名称以：、-、或u分隔。

指令应该有一个camelCase名称：例如

superMan

，并使用以下语法之一调用指令，因为HTML不区分大小写：

<super-man></super-man>
<super_man></super_man>
<super:man></super:man>
<SuPer_man></sUpEr_mAn> //HTML is case Insensitive

//HTML不区分大小写

演示：

<super-man></super-man>

<super-man></super-man>
<super_man></super_man>
<super:man></super:man>
<SuPer_man></sUpEr_mAn> //HTML is case Insensitive