Winkel ui-Routenstatus Vorlage mit eigenen HTML-Tag

Question

$stateProvider.state('abc', { 
       url: '/:id', 
       modal: true, 
       template: '<abc></abc>' 
      }) 

kann ich individuelle HTML-Tag in der Schablonen Eigenschaft haben ?, z.B. 'abc', ich habe mir jemand anderen Code angeschaut aber ich verstehe nicht wie das funktioniert, ich habe abc.html von gulp templatecache stuff verarbeitet. und es wird in einem modalen Dialog korrekt geladen.

Die Datei befindet sich unter 'src/app/components/abc/abc.html', woher weiß die Vorlage 'abc', welche html geladen werden soll? Ich nehme an, dass es irgendwo eine Definition für "abc" geben muss? aber ich kann es nicht finden.

Answer 1

ich schließlich dachte, wie es funktioniert, schaltet sich das benutzerdefinierte HTML-Tag aus durch eine ‚Komponente‘ definiert ist, und es gibt einige Namenskonvention, diese Arbeit zu machen. http://blog.grossman.io/angular-1-component-based-architecture-2/

https://docs.angularjs.org/guide/component-router

Answer 2

Kann ich benutzerdefinierte HTML-Tag in Vorlage Eigenschaft

Ja, natürlich. Vorlagen können benutzerdefinierte Direktiven verwenden, unabhängig davon, wie they are defined.

Es sollte irgendwo in Ihrem Modulcode oder einer seiner Abhängigkeiten eine 'abc'-Direktive sein.

Siehe this SO question, um die registrierten Anweisungen Ihres Moduls und Submodule in der Konsole aufzulisten.

Answer 3

Ja, Sie können benutzerdefinierte HTML verwenden. UI Router bietet Ihnen zwei Möglichkeiten, entweder geben Sie die template oder die templateUrl, die für die erste müssen Sie Ihre HTML in einem String-Literal schreiben, und letztere können Sie eine HTML-Datei Speicherort.

mit template mit Stringliteral:

$stateProvider.state('abc', { 
    url: '/:id', 
    modal: true, 
    template: '<abc></abc>' // this is correct! 
}) 

mit templateUrl mit HTML-Dateien.

$stateProvider.state('abc', { 
    url: '/:id', 
    modal: true, 
    templateUrl: '/path/to/abc.html' // if you have a file named `abc.html` in directory `path/to`, the template will be loaded 
})