javascript - 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 数据目标元素评估为 {{'#collapse'+$index+1}} 而不是 0,1,2 等。

有什么想法吗？

Answer 1

如果元素已经被赋值给属性something，绑定(bind)到data-something after that将不起作用反之亦然。

因此您需要更改 target 属性或 data-target 以启用绑定(bind)。或者将绑定(bind)的放在非绑定(bind)的之前。

这个问题的原因在于 Angular 创建元素的属性映射的方式。

angular complie.js源码中line 2081 :

        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-前缀的属性的值。

directiveNormalize 函数将消除属性的 'data-' 前缀。

现在 data-something 和 something 在元素的属性映射中共享相同的名称。

通过上面的代码，attrs 中的属性值将始终保持这两个中的FIRST ONE。