CODEWITHSUNDEEP
javascriptnode.jsangularjsmustache
Per Eriksson
Per Eriksson

Reputation: 534

Mustache.js to Angular.js, triple bracers in Angular?

I have the following in Mustache.js:

<div>{{{icon.tmpl}}}</div>

icon.tmpl is a template on its own with the following content:

<div id="{{id}}" class="glyphicon glyphicon-send"></div>

In Mustache.js, thanks to the triple bracers, this works perfectly, both levels of templates gets compiled. Now I can't make this work in Angular.js. The second embedded template does not get compiled, but is instead surrounded by quotation marks "..."

How to make this work in Angular?

Upvotes: 1

Views: 3566

Answers (1)

lucuma
lucuma

Reputation: 18339

You could either use an ngInclude or create a directive. Here is an example of an icon directive that essentially just replaces any icon element with the div info you've specified.

http://plnkr.co/edit/NK5bOFvsgpMGeTkteMif?p=preview

html:

<icon></icon>

js:

app.directive('icon', function ( $compile, $timeout) {
        return {
            restrict: 'EA',
            replace: true,
            template: '<div id="{{id}}" class="glyphicon glyphicon-send"></div>'
        }

    })

The directive could just as easily be something like <div class="icon"> or <div icon> and you could apply the template to it.

An example of the ngInclude:

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

Where icon.html just has your template info. Make sure that id is in the scope in both cases.

Upvotes: 2

Related Questions