La direttiva AngularJS non visualizza il modello

Question

Ecco la mia direttiva AngularJs. È previsto che mostri il div nel modello ma non mostra nulla mentre il codice viene eseguito.

Ecco il codice html

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

Qui è la direttiva le AngularJS

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

Ed ecco il demo

Answer 1

Quando si dichiara la vostra direttiva si usava il nome SuperMan, tuttavia questo è sbagliato. È necessario utilizzare superMan poiché verrà tradotto in super-man come elemento.

Qualsiasi lettera maiuscola nel nome della direttiva verrà tradotta in un trattino, poiché le lettere maiuscole non vengono utilizzate negli elementi. Ad esempio, myDirective si tradurrà in my-directive.

Come menzionato da altri, AngularJS utilizza normalizzazione seguenti regole di normalizzazione:

Strip x- e Data- dalla parte anteriore dell'elemento/attributi. Converti il nome delimitato da,, - o _ a 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> 

ho aggiornato il vostro violino per abbinare la sintassi corretta qui jsfiddle.

Answer 2

Angolare normalizes directives names - uso di camelCase nella direttiva e dash separato (di solito) poiché html non fa distinzione tra maiuscole e minuscole, nel modello.

modo in cui è necessario chiamare la direttiva denominata superMan con:

<super-man></super-man> 

Ecco un lavoro Demo

Answer 3

angolare normalizza tag di un elemento e attributo nome per determinare quali elementi corrisponde a quali direttive. In genere facciamo riferimento alle direttive in base al nome normalizzato di camelCase, sensibile al maiuscolo/minuscolo (ad esempio ngModel). Tuttavia, dal momento che HTML non fa distinzione tra maiuscole e minuscole, facciamo riferimento alle direttive nel DOM mediante moduli in lettere minuscole, in genere utilizzando gli attributi delimitatori di trattini sugli elementi DOM (ad esempio, modello -g).

Il processo di normalizzazione è il seguente:

Strip x- e Data- dal frontale dell'elemento/attributi. Converti il nome delimitato da,, - o _ a camelCase.

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

Si dovrebbe avere un nome camelCase per la direttiva: per esempio superMan, e utilizzare una delle seguente sintassi per chiamare la direttiva, come HTML è case-insensitive:

<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/