Die AngularJS-Direktive zeigt die Vorlage nicht an

Question

Hier ist meine AngularJs-Direktive. Es wird erwartet, dass das div in der Vorlage angezeigt wird, aber es wird nichts angezeigt, während der Code ausgeführt wird. Hier

ist die html

<div ng-app="SuperHero"> 
    <SuperMan></SuperMan> 
</div> 

Hier ist die AngularJS Richtlinie

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

Und hier ist der demo

Answer 1

Wenn Sie erklären Ihre Direktive Sie den Namen verwendet SuperMan, dies ist jedoch falsch. Sie sollten superMan als das Element verwenden, das in super-man übersetzt wird.

Jeder Großbuchstabe im Anweisungsnamen wird in einen Bindestrich umgewandelt, da Großbuchstaben in Elementen nicht verwendet werden. Zum Beispiel wird myDirective in my-directive übersetzt.

Wie von anderen erwähnt, verwendet AngularJS Normalisierung die folgenden Normalisierungsregeln:

Streifen x- und Daten- von der Vorderseite des Elements/Attribute. Konvertieren Sie den Namen:, - oder _-Trennzeichen in 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> 

ich Ihre Geige aktualisiert, um die korrekte Syntax hier jsfiddle übereinstimmen.

Answer 2

Angular normalizes directives names - mit camelCase in der Direktive und Bindestrich getrennt (in der Regel), da HTML nicht Groß-und Kleinschreibung in der Vorlage ist.

so, wo Sie die Richtlinie superMan Namen nennen müssen mit:

<super-man></super-man> 

ist hier ein Arbeits Demo

Answer 3

Angular eines Elements Tag normalisiert und Attributnamen , welche Elemente zu bestimmen, Entsprechen Sie den Anweisungen. Wir beziehen uns typischerweise auf die -Direktiven anhand ihres normalisierten camelCase-Namens (z. B. ngModel). Da HTML jedoch die Groß-/Kleinschreibung nicht berücksichtigt, verweisen wir auf die -Direktiven im DOM in Kleinbuchstaben, typischerweise mit durchgestrichenen Attributen auf DOM-Elementen (z. B. ng-Modell).

Der Normalisierungsprozess ist wie folgt:

Streifen x- und Daten- von der Vorderseite der Elemente/Attribute. Konvertieren Sie den Namen:, - oder _-Trennzeichen in CamelCase.

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

Sie sollten einen camelcase Namen für die Richtlinie haben: zB superMan, und verwenden Sie eine der folgenden Syntax Ihre Richtlinie zu nennen, wie HTML ist Groß- und Kleinschreibung:

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

Demo: http://jsfiddle.net/QUP97/3/