Angular / Bootstrap數據目標不評估表達式

Question

我的jade / pug文件中有：

div(ng-repeat='writing in user.clean_profile.writing_samples track by $index')
    a(toggle target="collapse" data-target="{{\'#collapse\'+$index+1}}") Link {{$index+1}}
    iframe.collapse(id="collapse{{$index+1}}" toggleable ng-src='{{preview(writing.url)}}', frameborder='0' )

（等效地）

<div ng-repeat="writing in user.clean_profile.writing_samples track by $index">
    <a toggle="toggle" target="collapse" data-target="{{'#collapse'+$index+1}}">Link {{$index+1}}</a>
    <iframe id="collapse{{$index+1}}" toggleable="toggleable" ng-src="{{preview(writing.url)}}" frameborder="0" class="collapse"></iframe>
</div>

但是，該鏈接未正確評估：實際的html data-target元素的評估結果為{{'#collapse'+ $ index + 1}}而不是0,1,2等。

有任何想法嗎？

Answer 1

如果該元素已經為屬性something分配了一個值，則綁定到此后的data-something將不起作用，反之亦然。

因此，您需要更改target屬性或data-target來啟用綁定。 或將綁定的一個放在不綁定的一個之前。

角度創建元素屬性圖的方式中出現此問題的原因。

在2081行附近的angular complie.js的源代碼中：

        nName = directiveNormalize(name.toLowerCase());
        attrsMap[nName] = name;
        if (isNgAttr || !attrs.hasOwnProperty(nName)) {
            attrs[nName] = value;
            if (getBooleanAttrName(node, nName)) {
              attrs[nName] = true; // presence means true
            }
        }

isNgAttr是保存當前處理屬性是否為具有ng-前綴的屬性的ng- 。

directiveNormalize函數將消除屬性的“數據”前綴。

因此，現在， data-something和something在元素的屬性圖中共享相同的名稱。

通過上面的代碼，該屬性的價值attrs將始終保持這兩個中的第一個 。

Answer 2

在Angular2中，您可以使用[attr]

<a toggle="toggle" target="collapse" 
    [attr.data-target]="'#collapse'+$index+1">
    Link {{$index+1}}
</a>
<iframe id="collapse{{$index+1}}" toggleable="toggleable" 
    [src]="preview(writing.url)" frameborder="0" 
    class="collapse">
</iframe>

也許有人幫了忙。