AngularJS - À L'Aide De Partiels De Façon Dynamique Dans D'Autres Partiels

Je suis relativement nouveau à AngularJS et voudrais savoir comment il est possible de tirer dans partielle de la dynamique des modèles. Considérer cette abstraction (et simplifié pour cet exemple) du module. Ce serait partielle d'un modèle qui sera réutilisé tout au long de l'application.

Partielle Module De Balisage

<div class="module">
    <h2 class="module-title">{{module.title}}</h2>

    <div class="module-content">
        {{module.content}}
    </div>

</div>

Après l'extraction de certaines données côté client, j'ai peut souhaiter pour module.content d'être une simple chaîne de texte, pas de problèmes là-bas. Ce qui serait utile, c'est si je pouvais insérer dynamiquement d'autres partielle de modèles dans module.content sur la base des données que je travaille avec. Disons, par exemple, dans ma réponse, j'ai une liste de titres que je souhaite afficher, il est possible de tirer une partie du modèle qui gère les titres? Et dans un autre endroit, module.content pourrait être partielle d'un modèle qui gère une galerie d'images.

D'entrée ou de direction serait grandement apprécié!

InformationsquelleAutor greaterweb | 2012-10-04
  1. 46

    Il ya un couple d'approches disponibles pour vous.

    Votre meilleur pari est d'ajouter votre propre la directive. L'extension de votre exemple:

    module.directive('myModule', function() {
  return {
    restrict: 'A',
    scope : {
      title : '@'
    },
    templateUrl : '/partial/module.html',
    transclude : true
  };
});

    Nous allons utiliser transclusion pour rendre le contenu plus souple. Maintenant, le partiel:

    <div class="module">
  <h2 class="module-title">{{title}}</h2>

  <div class="module-content" ng-transclude></div>
</div>

    De la présente directive installé, vous pouvez utiliser le code HTML suivant:

    <div my-module title="{{module.title}}">
  {{module.content}}
</div>

    Une autre option est d'utiliser le ng-inclure directive. C'est un simple transclusion d'une partielle, à la différence que la transcluded partielle vit dans le même champ d'application que le contexte, il a été inclus dans.

    <div ng-include="module.partialUrl"></div>

    Dans le cas ci-dessus, Angulaire sera transclude partielle à l'adresse URL à $scope.module.partialUrl. (Edit: cela signifie que vous pouvez remplacer dynamiquement hors de l'Isu par le remplacement de la portée de la variable utilisée par ngInclude. Impressionnant, non?)

    Si vous êtes juste en réutilisant le même partielle pour éviter de code répétitif, puis il suffit d'entourer l'URL entre guillemets simples:

    <div ng-include="'/partial/foo.html'"></div>
    • Merci pour la réponse informative! Je vais jouer avec ça ce soir et vous laisser savoir comment je fais. Le module.content partielle peut varier donc je vais devoir aller la route d'une coutume de la directive (ou les deux).
    • J'ai pris le chemin de la coutume, directives et ont été en mesure d'accomplir ce que je devais, je vous remercie pour votre aide!
    • + pour "entourent l'URL entre guillemets simples"
    InformationsquelleAutor qualidafial