Question

我正在使用Jade模板和Angular JS，并且在angular的控制器中定义了这样的转发器处理简单数组：$ scope.ids = ['demo1'，'demo2']

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

无论我做什么，Jade都会尝试解析传递给SELECT标记的所有内容，因此它总是从tag的属性中删除$ index变量。作为HTML的结果，我总是看到以下内容：

<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

问题：如何防止Jade解析此HTML属性并在结果HTML中打印字符串？

P上。 S.我尝试了以下语法，它不起作用......建议？

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.只是为了解释为什么我用HTML搞砸了Jade - 我试图使用“仅玉”语法而且它也不起作用：

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

Answer 1

尝试阻止解析：

!{{$index}} <-- Escaped

请参阅此帖：How to make Jade stop HTML encoding element attributes, and produce a literal string value?

关于这个问题：https://github.com/visionmedia/jade/issues/198

并说它是否有效！

Answer 2

最近我发现这个讨论是由Sangram开始的：

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

我意识到Sangram是对的 - 这不是Jade问题 - 这就是角度呈现模板的方式。

有一个解决方案 - 在$ evalAsync中调用链接功能 - 可能它是一个不错的选择，但在我的情况下，我需要立即设置控件的ID，所以我来到这个解决方案 - 如果我不能设置ID - 我可以生成它：

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

如何防止Jade Template解析HTML属性

2 个答案: