AngularJS指令不显示模板

这是我的AngularJs指令。 它”希望在模板中显示div但在代码运行时它什么都没显示。

这是html

这是AngularJS指令

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

这是演示

Answer 1

当您声明您的指令时，您使用了名称SuperMan ，但这是错误的。 您应该使用superMan ，因为它将被转换为super-man作为元素。

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

正如其他人所提到的，AngularJS使用以下规范化规则进行规范化：

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

JavaScript的：

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

HTML：

我更新你的小提琴，以匹配正确的语法jsfiddle 。

Answer 2

Angular 规范化指令名称 – 使用指令中的 camelCase和破坏（通常），因为html在模板中不区分大小写。

所以你需要调用名为superMan的指令：

这是一个有效的演示

Answer 3

Angular规范化元素的标记和属性名称，以确定哪些元素与哪些指令匹配。 我们通常通过其区分大小写的camelCase规范化名称（例如ngModel）来引用指令。 但是，由于HTML不区分大小写，我们通过小写forms引用DOM中的指令，通常使用DOM元素上的划线分隔属性（例如ng-model）。

规范化过程如下：

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

https://docs.angularjs.org/guide/directive

您的指令应该有一个camelCase名称：例如superMan ，并使用以下语法之一来调用您的指令，因为HTML不区分大小写 ：

     //HTML is case Insensitive 

演示： http ： //jsfiddle.net/QUP97/3/