AngularJS指令未显示模板

Question

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

以下是演示代码：

- iJade

Answer 1

当您声明指令时，您使用了名称SuperMan，然而这是错误的。您应该使用superMan，因为它将被翻译成元素super-man。

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

如其他人所述，AngularJS使用以下规范化规则：

从元素/属性前面剥离x-和data-。将名称中的:、-或_分隔符转换为驼峰式大小写。

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>

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

- Joseph Callaars

Answer 2

Angular 规范化指令名称 - 在指令中使用驼峰式命名法和破折号分隔（通常情况下），因为HTML不区分大小写，在模板中。

所以，当您需要调用名为superMan的指令时，请使用：

<super-man></super-man>

这是一个可运行的演示。

- alonisser

Answer 3

Angular会将元素的标签和属性名规范化，以确定哪些元素与哪些指令匹配。我们通常通过它们区分大小写的camelCase规范化名称（例如ngModel）来引用指令。然而，由于HTML不区分大小写，我们在DOM中使用小写形式引用指令，通常在DOM元素上使用破折号分隔的属性（例如ng-model）。

规范化过程如下： 从元素/属性的前面删除x-和data-。将:、-或_分隔的名称转换为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/

- edi9999