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

這是演示

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: '<div>Hello fromt Directive</div>'
    }
});

HTML：

<div ng-app="SuperHero">
    <super-man></super-man>
</div>

我更新了你的小提琴，以匹配正確的語法jsfiddle 。

Answer 2

Angular 規范化指令名稱 - 使用指令中的 camelCase和破壞（通常），因為html在模板中不區分大小寫。

所以你需要調用名為superMan的指令：

<super-man></super-man>

這是一個有效的演示

Answer 3

Angular規范化元素的標記和屬性名稱，以確定哪些元素與哪些指令匹配。 我們通常通過其區分大小寫的camelCase規范化名稱（例如ngModel）來引用指令。 但是，由於HTML不區分大小寫，我們通過小寫形式引用DOM中的指令，通常使用DOM元素上的划線分隔屬性（例如ng-model）。

規范化過程如下：

從元素/屬性的前面剝離x-和數據。 將：， - 或_分隔的名稱轉換為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/