How to prevent angularjs directive compilation (use as a template)

Question

I just wanted to know if it is possible to prevent the compilation of angularjs directives ?

I use the jQuery Slick Grid plugin to display some datagrids in my website, and I imagined a way to define easily the cells templates with nested directives containing HTML.

The problem is that this HTML code is meant to be used as a template but AngularJS compiles it before the grid is initialized! (seems logical though...)

Thanks in advance !

EDIT: Here is an example of my directive.

<div class="datagrid" my-datagrid="o in collection">
    <div my-datagrid-column="col1">
         <div>{{o.col1}}</div>
    </div>
    <div my-datagrid-column="col2">
         <div custom-directive-with-transclusion="foobar">{{o.col2}}</div>
    </div>
</div>

So here it is, I have a parent directive my-datagridwhich contains several my-datagrid-column describing each columns of the grid. Eech of these my-datagrid-column directive node contains HTML content which purpose is to be used as a template for the grid cells, at the time they will be rendered.

The problem is that, the engine "sees" and compiles, transclude the custom-directive-with-transclusion directive before the my-datagrid directive creates the Datagrid.

So the my datagrid-column directive get an already compiled cell "template"...and I don't want that, I want to compile each cell myself with the $compile service.

Maybe it is not the way to do that, maybe I'm going totally in the wrong way. I just want to avoid describing the cell template in the Javascript controller between some ugly quotes and escaping everything like :

template[0] = '<div>this is my ugly template {{myCol1}} of my first column</div>';
template[1] = '<div>this is my ugly template {{myCol2}} of the 2nd column</div>';

I don't understand the problem. The normal way for this is just creating a directive to wrap your jquery plugin. — Jesus Rodriguez, Sep 06 '13 at 10:48

score 0 · Answer 1 · edited May 23 '17 at 10:27

0

Two Options:

Instead of using {{}}, use another symbol to represent these. Angularjs will then ignore them. In your directive, search and replace the symbols with {{}}.
Have a look at One-off rendering of an angular template string I used this techique to place angular directives in cells and it works well.

Good luck.

edited May 23 '17 at 10:27

Community

1
1

answered Feb 22 '14 at 17:18

JoelBellot

231
3
9

score 0 · Answer 2 · answered Nov 30 '15 at 22:33

you can't stop the compile process after link is finished but you can take the element out from the DOM (unlink the element, it will prevent the compile process), exactly like the ng-if directive, here you can see the ng-if code: https://github.com/angular/angular.js/blob/master/src/ng/directive/ngIf.js

How to prevent angularjs directive compilation (use as a template)

2 Answers2