Remplacer le nœud ng-include par un modèle ?

Question

Je suis un peu novice en matière d'angularité. Est-il possible de remplacer le nœud ng-include avec le contenu du modèle inclus ? Par exemple, avec :

<div ng-app>
    <script type="text/ng-template" id="test.html">
        <p>Test</p>
    </script>
    <div ng-include src="'test.html'"></div>
</div>

Le code html généré est le suivant :

<div ng-app>
    <script type="text/ng-template" id="test.html">
        <p>Test</p>
    </script>
    <div ng-include src="'test.html'">
        <span class="ng-scope"> </span>
        <p>Test</p>
        <span class="ng-scope"> </span>
    </div>
</div>

Mais ce que je veux, c'est.. :

<div ng-app>
    <script type="text/ng-template" id="test.html">
        <p>Test</p>
    </script>
    <p>Test</p>
</div>

Answer 1

La directive suivante étend la fonctionnalité de la directive native ng-include.

Il ajoute un récepteur d'événements pour remplacer l'élément d'origine lorsque le contenu est prêt et chargé.

Utilisez-le de la manière originale, en ajoutant simplement l'attribut "replace" :

<ng-include src="'src.html'" replace></ng-include>

ou avec la notation des attributs :

<div ng-include="'src.html'" replace></div>

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();
                    };
                });
            }
        }
    };
});

Answer 2

J'opterais pour une solution plus sûre que celle proposée par @Brady Isom.

Je préfère m'appuyer sur la onload option donnée par ng-include pour s'assurer que le modèle est chargé avant d'essayer de le supprimer.

.directive('foo', [function () {
    return {
        restrict: 'E', //Or whatever you need
        scope: true,
        template: '<ng-include src="someTemplate.html" onload="replace()"></ng-include>',
        link: function (scope, elem) {
            scope.replace = function () {
                elem.replaceWith(elem.children());
            };
        }
    };
}])

Il n'est pas nécessaire d'ajouter une deuxième directive puisque tout est géré dans la première.