direttiva AngularJS modello non rendendo

Question

Ho una semplice direttiva che si limita a visualizzare un testo per ora:

app.directive("exampleText", function() { 
    return { 
     restrict: "E", 
     template: '<div>hello!</div>' 
    } 

}); 

Nel mio index.html ho questo:

<div class="container" ng-app="customerPortalApp"> 
    <div ui-view></div> 
    <exampleText></exampleText> 
</div> 

exampleText è fuori dalla mia ui-view come questo ha a che fare con i miei percorsi e funziona correttamente. Ma la mia comprensione del modello di direttiva dovrebbe essere tale. Ho perso qualcosa?

Answer 1

Con una direttiva di nome:

app.directive("exampleText", ... 

HTML dovrebbe essere:

<example-text></example-text> 

Da documentation:

angolare normalizza tag di un elemento e nome attributo per determinare quali elementi partita 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).

Answer 2

Come tasseKATT notato il nome direttiva dovrebbe rimanere come "exampleText" e l'elemento html dovrebbe essere <example-text>

ho pensato che una demo può aiutare demo

il modello:

<div ng-app="myApp"> 
    <sample-text></sample-text> 
</div> 

la direttiva:

var app = angular.module('myApp', []); 
app.directive('sampleText', function() { 
    return { 
     restrict: "E", 
     template: '<div>Some sample text here.</div>' 
    }; 
});