如何prevent玉模板解析HTML属性

问题描述

我使用的玉模板与角JS一起使用，在角的控制器进行定义，例如中继器处理简单的数组：$ scope.ids = ['demo1的'，'DEMO2']

  .controls（NG-重复=控件ID在IDS）
  ＆LT; D​​IV ID ={{$指数}}＆GT; {{$指数}}＆LT; / DIV＆GT;
 

无论我做什么玉试图解析一切传递到SELECT标记，因此它总是会删除标记的属性$​​索引变量。作为结果的HTML我总是看到以下内容：

 ＆LT; D​​IV ID =＆GT; 0℃; / DIV＆GT; // ID属性始终是空的，因为玉替换它
＆LT; D​​IV ID =＆GT; 1 LT; / DIV＆GT; //在标签的同时HTML是正确呈现
 

问：如何通过玉和打印字符串至该HTML属性的对$ pvent解析为在结果HTML

P上。 S.我尝试下面的语法，它不工作...建议？

  ID =| {{$指数}}// id是空的
ID！={{$指数}}// id是空的
ID =！{{$指数}}//语法错误
ID =！{{控件ID}}//语法错误
{：ID =＆GT; {{$指数}}} //不添加ID在所有
 

P上。 P. S.只是为了解释为什么我用HTML搞乱玉 - 我试图用只玉语法，它也没有工作：

  .controls（NG-重复=控件ID在IDS）
  .demo（ID ={{$指数}}）{{$指数}}
 

解决方案

最近我发现本次讨论由SANGRAM启动：

{{$index}}伍重复角指令连接功能后计算出来的。 $编译它？

我意识到，SANGRAM是正确的这一点 - 这是不是玉的问题 - 这是何等的角度呈现模板

有一个解决方案 - 调用$ evalAsync内联函数 - 也许这是一个很好的选择，但对我来说，我需要设置控件的ID立刻让我想出了这个解决方案 - 如果我不能设置ID - 我可以生成的：

  app.directive（'标签'，['$ rootScope'，函数（$ rootScope）{    变种controlIndex的= 0;    VAR连接=功能（范围，元素，ATTRS）{    // ***控件ID *** //        元素[0] .ID = attrs.id || 控制+（++ controlIndex的）;        ...
    }    返回{
        限制：EA，
        templateUrl：标签/ template.html'，
        链接：链接
    }
}]）;
 

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

解决方案

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

这篇关于如何prevent玉模板解析HTML属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！