How to add static HTML inside generated template in AngularJS?

Question

Is there a way to add static HTML inside generated template?

I have that 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>

... And then, I want to add foo (see yellow note below) inside first <content>, but not inside second. So, the output should be:

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

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

How I can do it?

jsFiddle as aksed in the comments.

Note: This is just SO example. In the real code, it should be added more complex HTML markup, not simple foo. For example, it may be added something like: <div class="...">......</div>. Or, maybe, some HTML table. That is what I want.

You could for example put a flag or something on the place the text belongs. Then get the template and replace the flag — Wouter den Ouden
– Wouter den Ouden, Commented Mar 8, 2016 at 11:25
@HassanTariq Fiddle added. Also, please see yellow note at the bottom. Thanks. — john c. j.
– john c. j., Commented Mar 8, 2016 at 11:47

jeerbl · Accepted Answer · 2016-03-08 12:11:50Z

5

You can use ngTransclude here.

You would define your directive like this:

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

Then in your HTML, you would have:

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

And the foo will be inserted automatically inside the ng-transclude element in your template.

More information on AngularJS documentation.

edited Mar 8, 2016 at 12:11

answered Mar 8, 2016 at 12:01

jeerbl

7,9675 gold badges28 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jeerbl · Accepted Answer · 2016-03-08 12:06:44Z

1

This will solve your problem.

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

Template

<test content='foo'></test>
<test></test>

edited Mar 8, 2016 at 12:06

jeerbl

7,9675 gold badges28 silver badges39 bronze badges

answered Mar 8, 2016 at 11:53

Naga Sandeep

1,4312 gold badges13 silver badges26 bronze badges

Comments

Dwijen · Accepted Answer · 2016-03-08 11:28:07Z

0

This is how I would do it. Assuming you already know what content to add for each 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>

That would give you the desired output.

answered Mar 8, 2016 at 11:28

Dwijen

5905 silver badges16 bronze badges

1 Comment

jeerbl Over a year ago

In your code the  element is added even if there is no content.

Collectives™ on Stack Overflow

How to add static HTML inside generated template in AngularJS?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related