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

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

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

HTML :

<div ng-include src="dynamicTemplatePath" include-replace></div>

Directive sur mesure :

app.directive('includeReplace', function () {
    return {
        require: 'ngInclude',
        restrict: '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 à "test.html" produirait le balisage souhaité.

Answer 2

Donc grâce à @user1737909, j'ai compris que ng-include n'est pas la bonne solution. Les directives sont la meilleure approche et sont plus explicites.

var App = angular.module('app', []);

App.directive('blah', function() {
    return {
        replace: true,
        restrict: 'E',  
        templateUrl: "test.html"
    };
});

En html :

<blah></blah>

Answer 3

J'ai eu le même problème, ma feuille de style css tierce n'aimait pas l'élément DOM supplémentaire.

Ma solution était très simple. Il suffit de déplacer le ng-include 1 vers le haut. Ainsi, au lieu de

<md-sidenav flex class="md-whiteframe-z3" md-component-id="left" md-is-locked-open="$media('gt-md')">
  <div ng-include="myService.template"></span>
</md-sidenav>

C'est ce que j'ai fait :

<md-sidenav flex class="md-whiteframe-z3" md-component-id="left" md-is-locked-open="$media('gt-md')" ng-include="myService.template">
</md-sidenav>

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

Answer 4

Une autre solution consiste à écrire votre propre directive simple de remplacement/inclusion, par exemple

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

Il serait alors utilisé comme suit :

<div my-replace="test.html"></div>

Answer 5

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

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