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>'
    }
});

这是demo

Answer 1

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

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

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

从元素/属性的前面剥离x-和data-。兑换：， - 或_分隔名称为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的正确语法。

Answer 2

Angular normalizes directives names - 在模板中使用camelCase并使用破折号（通常），因为html在模板中不区分大小写。

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

<super-man></super-man>

这是一个工作Demo

Answer 3

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

规范化过程如下：

从元素/属性的前面剥离x-和data-。兑换   ：， - 或_分隔名称为camelCase。

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

您的指令应该有一个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/

AngularJS指令不显示模板

3 个答案: