Existe-t-il un moyen d'ajouter du HTML statique à l'intérieur du modèle généré?

J'ai ce code:

<test></test>
<test></test>

<script>
var app = angular.module("myApp", []);
app.directive("test", function() {
    return {
        template:
        '<div class="wrapper">' +
        '<div class="content">' +
        '</div>' +
        '</div>'
    };
});
</script>

... Et puis, je veux ajouter <p>foo</p> (voir la note jaune ci-dessous) à l'intérieur du premier <content>, mais pas à l'intérieur du second. Ainsi, la sortie devrait être:

<test>
    <div class="wrapper">
        <div class="content">
            foo
        </div>
    </div>
</test>

<test>
    <div class="wrapper">
        <div class="content">
        </div>
    </div>
</test>

Comment je peux le faire?

jsFiddle comme indiqué dans les commentaires.

Remarque: Ceci est juste un exemple. Dans le vrai code, il faudrait ajouter un balisage HTML plus complexe, pas simple <p>foo</p>. Par exemple, il peut être ajouté quelque chose comme: <div class="..."><p>...</p><p>...</p></div>. Ou, peut-être, un tableau HTML. C'est ce que je veux.

1
john c. j. 8 mars 2016 à 14:20

3 réponses

Meilleure réponse

Vous pouvez utiliser ngTransclude ici.

Vous définiriez votre directive comme ceci:

var app = angular.module("myApp", []);
app.directive("test", function() {
    return {
        transclude: true,
        template:
        `<div class="wrapper">
            <div class="content">
                <ng-transclude></ng-transclude>
            </div>
        </div>`
    };
});

Ensuite, dans votre HTML, vous auriez:

<test>
    <p>foo</p>
</test>
<test></test>

Et le <p>foo</p> sera inséré automatiquement à l'intérieur de l'élément ng-transclude dans votre modèle.

Plus d'informations sur la documentation AngularJS.

5
jeerbl 8 mars 2016 à 12:11

Voilà comment je le ferais. En supposant que vous savez déjà quel contenu ajouter pour chaque directive.

<test content="foo"></test>
<test content=""></test>

<script>
var app = angular.module("myApp", []);
app.directive("test", function() {
    return {
       template: function(el, attrs){
        '<div class="wrapper">' +
        '<div class="content">' + '<p>'+attrs.content+'</p>'
        '</div>' +
        '</div>'
       }
    };
});
</script>

Cela vous donnerait la sortie souhaitée.

0
Dwijen 8 mars 2016 à 11:28

Cela résoudra votre problème.

Directive

myApp.directive("test", function($compile) {
    return {
        restrict:'E',
        link: function(scope, element, attrs) {
            var childContent = '';
            if(attrs.content == 'foo')
                childContent = '<p>foo</p>';

            var htmlText = '<div class="wrapper">' +
                '<div class="content">' +
                childContent+
                '</div>' +
                '</div>';

            element.append($compile(htmlText)(scope));
        }
    };
});

Modèle

<test content='foo'></test>
<test></test>
1
jeerbl 8 mars 2016 à 12:06