How to prevent Jade Template parsing HTML attribute

问题

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

回答1:

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 !

回答2:

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

来源：https://stackoverflow.com/questions/18980947/how-to-prevent-jade-template-parsing-html-attribute

标签

javascript

angularjs

pug