AngularJs Inclure Partielle Modèle

j'ai ceci dans mon fichier principal de mise en page

<body>
    <header id="header" ng-controller="HeaderController"></header>
    <div class="container" ng-view></div>

j'ai une tête.Modèle partiel html dans la structure de mon répertoire.

Comment inclure ce modèle dans mon application? Je pensais que angular incluait automatiquement le modèle après avoir traité le contrôleur, mais ça ne fonctionne pas.

le noeud d'en-tête doit être remplacé par le contenu de ce fichier.

47
demandé sur user3403716 2014-03-11 19:12:08

2 réponses

une façon d'inclure les templates / fragments html des fichiers externes est d'utiliser le ng-include directive ( doc).

<ng-include src="'/path/to/the/header.html'"></ng-include>

ou

<div ng-include src="'/path/to/the/header.html'"></div>
86
répondu Suvi Vignarajah 2015-03-04 04:02:05

Angular 2, ngInclude a été supprimé et les directives personnalisées sont préférées. C'est la façon dont j'arrive avec

  1. définissez le composant principal de votre application, lequel lien vers la page maître 

        @View({
        templateUrl:   'client/app/layout/main.html',
        directives: [ROUTER_DIRECTIVES, Navigation, Footer]
    })
    @Component({selector: 'app'})
    @RouteConfig(
        routerConfig
    )
    class MainComponent {
    }

Et c'est le principal modèle 

<!---- Navigation bar ---->
<navigation></navigation>
<!----/ Navigation bar ---->

<!---- Main Part ---->
<router-outlet>
</router-outlet>
<!----/ Main Part ---->

<!---- Footer ---->
<footer></footer>
<!----/ Footer ---->
  1. Définir base.html, qui contiendra la balise body et la balise app

<body> <app>Loading ...</app> </body>

  1. Maintenant, finale step définit les composants pour Navigation et Footer comme le MainComponent, qui pointent vers votre partielle des modèles
5
répondu Thai Tran 2015-11-25 00:24:40