Comment spécifier un modèle à une directive ngInclude dans AngularJS?

Je voudrais utiliser le même modèle HTML à 3 endroits, chaque fois avec un modèle différent. Je sais que je peux accéder aux variables du modèle, mais les noms seront différents.

Est-il possible de passer un modèle au ngInclude?

C’est ce que j’aimerais réaliser, bien sûr, l’atsortingbut add-variable ne fonctionne pas maintenant. Ensuite, dans mon modèle inclus, j’accéderais à l’object details et à ses propriétés.

 

{{projectSummary.ProjectResults.DisplayName}}

{{document.DisplayName}}

{{document.DisplayName}}

Si j’ai pris une mauvaise approche en utilisant ng-include, y a-t-il autre chose que je devrais essayer?

NOTE: ce n’est pas ma réponse originale mais c’est comme ça que je le ferais après avoir utilisé un peu angular.

Je créerais une directive avec le modèle HTML en tant que balisage transmettant les données dynamics à la directive, comme vu dans ce violon .

Etapes / notes pour cet exemple:

  1. Définissez une directive avec un balisage dans templateUrl et un ou des atsortingbuts utilisés pour transmettre des données dans la directive (de type nommé dans cet exemple).
  2. Utilisez les données de directive dans le modèle ( type nommé dans cet exemple).
  3. Lorsque vous utilisez la directive dans le balisage, assurez-vous de transmettre les données de la scope du contrôleur à la directive ( (où la facturation accède à un object dans la scope du contrôleur) .
  4. Notez que lors de la définition d’une directive, le nom est camel cased mais lorsqu’il est utilisé dans le balisage, il est délimité par des tirets minuscules (c’est-à-dire qu’il est nommé addressForm dans js mais address-form dans le html). Vous trouverez plus d’informations à ce sujet dans les documents angulars ici .

Voici les js:

 var myApp = angular.module('myApp',[]); angular.module('myApp').directive('addressForm', function() { return { ressortingct: 'E', templateUrl: 'partials/addressform.html', // markup for template scope: { type: '=' // allows data to be passed into directive from controller scope } }; }); angular.module('myApp').controller('MyCtrl', function($scope) { // sample objects in the controller scope that gets passed to the directive $scope.billing = { type: 'billing type', value: 'abc' }; $scope.delivery = { type: 'delivery type', value: 'def' }; }); 

Avec balisage:

 

REPONSE ORIGINALE (ce qui est complètement différent que d’utiliser une directive BTW).

Note: Le violon de ma réponse d’origine ci-dessous ne semble plus fonctionner en raison d’une erreur (mais le conserver ici au cas où il serait toujours utile)

Il y a eu une discussion à ce sujet sur le groupe Google que vous pouvez voir ici .

Il semble que cette fonctionnalité ne soit pas prise en charge par défaut, mais vous pouvez utiliser le correctif de Brice comme décrit dans cet article .

Voici l’exemple de code de son jsfiddle :

  

Il y a une solution plutôt simple, même si je dois admettre que ce n’est pas ce que Misko recommanderait. Mais si la création d’une directive est trop importante pour vous et que l’obtention du patch de Brice n’est pas réalisable, alors ce qui suit vous aidera.

 

C’est assez évident pourquoi cela fonctionne. Voir un exemple ici: http://jsfiddle.net/Cndc6/4/

Il y a une solution pour résoudre ce problème, mais il semble que ce soit mort: https://github.com/angular/angular.js/pull/1227

Sans modifier le code source angular, cela résoudra le problème de manière réutilisable, sans trop de piratage:

 directive('newScope', function() { return { scope: true, priority: 450, }; }); 

Et un exemple:

 

Voici un Plunker en action: http://plnkr.co/edit/El8bIm8ta97MNRglfl3n

 
directive('newScope', function () { return { scope: true, priority: 450, comstack: function () { return { pre: function (scope, element, attrs) { scope.$eval(attrs.newScope); } }; } }; });

Ceci est une directive qui combine la new-scope de la réponse de John Culviner avec le code du ng-init d’Angular.

Pour être complet, voici la source Angular 1.2 26 ng-init , vous pouvez voir que la seule modification de la directive new-scope est l’ajout de la scope: true

 { priority: 450, comstack: function() { return { pre: function(scope, element, attrs) { scope.$eval(attrs.ngInit); } }; } } 

Solution Quick’n’dirty:

 

Je t’entends! ng-include n’est pas réutilisable car il a access à la scope globale. C’est un peu bizarre.

Il devrait y avoir un moyen de définir des variables locales. Utiliser une nouvelle directive au lieu de ng-include est une solution plus propre.

L’utilisation idéale ressemble à:

 

La directive est la suivante:

 .directive( 'ngIncludeTemplate' () -> { templateUrl: (elem, attrs) -> attrs.ngIncludeTemplate ressortingct: 'A' scope: { 'ngIncludeVariables': '&' } link: (scope, elem, attrs) -> vars = scope.ngIncludeVariables() for key, value of vars scope[key] = value } ) 

Vous pouvez voir que la directive n’utilise pas la scope globale. Au lieu de cela, il lit l’object à partir de ng-include-variables et ajoute ces membres à sa propre étendue locale.

C’est propre et générique.