How to prevent Jade Template parsing HTML attribute

Question

I am using Jade Template in conjunction with Angular JS and have such repeater processing simple array defined in angular's controller : $scope.ids = ['demo1', 'demo2']

.controls(ng-repeat="controlId in ids")
  <div id="{{$index}}">{{$index}}</div>

Whatever i do Jade tries to parse everything passed to the SELECT tag and thus it always removes $index variable from tag's attribute. As result in HTML i always see the following:

<div id="">0</div> // ID attribute is always empty because Jade replaces it
<div id="">1</div> // at the same time HTML of the tag was rendered correctly

Question : how to prevent parsing of this HTML attribute by Jade and print string as is in a result HTML?

P. S. I tried the following syntax and it does not work ... suggestions?

id="|{{$index}}" // id is empty
id!="{{$index}}" // id is empty
id="!{{$index}}" // syntax error
id="!{{controlId}}" // syntax error
{:id => {{$index}}} // does not add ID at all

P. P. S. Just to explain why i am messing up Jade with HTML - i tried to use "jade only" syntax and it also did not work :

.controls(ng-repeat="controlId in ids")
  .demo(id="{{$index}}") {{$index}}

There is no reason why it should not work. Why are you using .controls which is jade. and
which is html? probably your div has come out of the scope of .controls in html. — Sangram Singh, Sep 24 '13 at 18:11
@Sangram Singh : i tried to use only Jade syntax until i realized that i simply need raw HTML this is why here i show two different kinds of syntax, briefly - "Jade only syntax" does not work too — Anonymous, Sep 24 '13 at 18:59
The problem is not with Jade. I'm using id={{$index}} and it works. What is `ids = ?` — Sangram Singh, Sep 24 '13 at 19:10
@Sangram Singh : replied above $scope.ids = ['demo1', 'demo2'] — Anonymous, Sep 27 '13 at 10:29

score 0 · Answer 1 · edited May 23 '17 at 12:32

0

Try to prevent the parsing like that :

!{{$index}} <-- Escaped

Refer to this post : How to make Jade stop HTML encoding element attributes, and produce a literal string value?

And to this issue : https://github.com/visionmedia/jade/issues/198

And say if it works !

edited May 23 '17 at 12:32

Community

1
1

answered Sep 24 '13 at 16:21

Thomas Pons

7,609
3
34
53

yes, i saw these issues, unfortunately it does not work and i updated my answer to describe what happens when i use !{{$index}} or !{{controlId}} – Anonymous Sep 27 '13 at 10:36

score 0 · Accepted Answer · edited May 23 '17 at 12:17

Recently i found this discussion started by Sangram :

{{$index}} of ng-repeat computed after linker function of angular directive. $compile it?

And i realized that Sangram was right about this - this is not Jade issue - this is how angular renders templates.

There was a solution - to call linking function inside $evalAsync - probably it is a good alternative but in my case i need to set ID of the control immediately so i came up to this solution - if i cannot set the ID - i can generate it :

app.directive('tags', ['$rootScope', function($rootScope) {

    var controlIndex = 0;

    var linker = function(scope, element, attrs) {

    // *** Control ID *** //

        element[0].id = attrs.id || 'control' + (++controlIndex);

        ...
    }

    return {
        restrict: 'EA',
        templateUrl: 'tags/template.html',
        link: linker
    }
}]);

How to prevent Jade Template parsing HTML attribute

2 Answers2

Linked