Remplacez le nœud ng-include par le modèle?

Un peu nouveau à angular. Est-il possible de remplacer le nœud ng-include par le contenu du modèle inclus? Par exemple, avec:

 

Le HTML généré est:

 

Test

Test

Mais ce que je veux c’est:

 

Test

Test

J’ai eu le même problème et je voulais toujours que les fonctionnalités de ng-include incluent un modèle dynamic. Je construisais une barre d’outils Bootstrap dynamic et j’avais besoin que le balisage plus propre pour les styles CSS soit appliqué correctement.

Voici la solution que j’ai trouvée pour ceux qui sont intéressés:

HTML:

 

Directive douanière:

 app.directive('includeReplace', function () { return { require: 'ngInclude', ressortingct: 'A', /* optional */ link: function (scope, el, attrs) { el.replaceWith(el.children()); } }; }); 

Si cette solution était utilisée dans l’exemple ci-dessus, la définition de scope.dynamicTemplatePath sur ‘test.html’ entraînerait le marquage souhaité.

Donc, grâce à @ user1737909, j’ai réalisé que ng-include n’est pas la solution. Les directives sont la meilleure approche et plus explicite.

 var App = angular.module('app', []); App.directive('blah', function() { return { replace: true, ressortingct: 'E', templateUrl: "test.html" }; }); 

En html:

  

J’ai eu le même problème, ma feuille de style css tiers n’a pas aimé l’élément DOM supplémentaire.

Ma solution était super simple. Il suffit de déplacer le ng-include 1 vers le haut. Donc au lieu de

  

J’ai simplement fait:

   

Je parie que cela fonctionnera dans la plupart des situations, même si techniquement, ce n’est pas ce que la question pose.

Une autre alternative consiste à écrire votre propre directive simple replace / include, par exemple

  .directive('myReplace', function () { return { replace: true, ressortingct: 'A', templateUrl: function (iElement, iAttrs) { if (!iAttrs.myReplace) throw new Error("my-replace: template url must be provided"); return iAttrs.myReplace; } }; }); 

Ceci serait alors utilisé comme suit:

 

C’est la bonne façon de remplacer les enfants

 angular.module('common').directive('includeReplace', function () { return { require: 'ngInclude', ressortingct: 'A', comstack: function (tElement, tAttrs) { tElement.replaceWith(tElement.children()); return { post : angular.noop }; } }; }); 

La directive suivante étend la fonctionnalité des directives natives ng-include.

Il ajoute un écouteur d’événement pour remplacer l’élément d’origine lorsque le contenu est prêt et chargé.

Utilisez-le de la manière originale, ajoutez simplement l’atsortingbut “replace”:

  

ou avec une notation d’atsortingbut:

 

Voici la directive (n’oubliez pas d’inclure le module ‘include-replace’ comme dépendance):

 angular.module('include-replace', []).directive('ngInclude', function () { return { priority: 1000, link: function($scope, $element, $attrs){ if($attrs.replace !== undefined){ var src = $scope.$eval($attrs.ngInclude || $attrs.src); var unbind = $scope.$on('$includeContentLoaded', function($event, loaded_src){ if(src === loaded_src){ $element.next().replaceWith($element.next().children()); unbind(); }; }); } } }; }); 

J’irais avec une solution plus sûre que celle fournie par @Brady Isom.

Je préfère onload option onload donnée par ng-include pour vérifier que le modèle est chargé avant d’essayer de le supprimer.

 .directive('foo', [function () { return { ressortingct: 'E', //Or whatever you need scope: true, template: '', link: function (scope, elem) { scope.replace = function () { elem.replaceWith(elem.children()); }; } }; }]) 

Pas besoin d’une seconde directive puisque tout est traité dans le premier.