变量 – 在angularjs中的src属性中使用ng-repeat变量？

发布时间：2020-12-17 09:52:30 所属栏目：安全来源：网络整理

导读：我有以下内容： div.container script(src='/js/bootstrap/holder.js') p.text-info(ng-pluralize,count="devices.length",when="{ '0': 'There are no fragments.','one': 'There is 1 fragment.','other': 'There are {} fragments.'}") ul.unstyled(ng-re

我有以下内容：

div.container
    script(src='/js/bootstrap/holder.js')
    p.text-info(ng-pluralize,count="devices.length",when="{ '0': 'There are no fragments.','one': 'There is 1 fragment.','other': 'There are {} fragments.'}")

    ul.unstyled(ng-repeat='fragment in devices')
        ul.thumbnails
            li.span
                div.thumbnail
                    img(src="holder.js/{{fragment.dimension.width}}x{{fragment.dimension.height}}")
                    div.caption
                        h3 {{fragment.name}}
                        p {{fragment.dimension}}
                        ul.unstyled(ng-repeat='component in fragment.components')
                            li {{ component.name }}

问题出在src =“holder.js / {{fragment.dimension.width}} x {{fragment.dimension.height}}”中,即使查看生成的html我看到了正确的src(src =“holder .js / 300×200“)它不显示图像.我猜这不是如何在属性中使用角度变量的.

我怎样才能使它工作？

编辑：
它似乎没有执行holder.js ..
这里是来源：在第一次调用中,我在第二次使用angular {{hash}},我手动将holder.js / 300×200

<div class="thumbnail">
    <img src="holder.js/1678x638">
    <img src="data:image/png;base64,iVBORw0KG...ElFTkSuQmCC" src="holder.js/300x200" alt="300x200" style="width: 300px; height: 200px;">
</div>

documentation很清楚地解释了这一点：

Using Angular markup like {{hash}} in a src attribute doesn’t work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.

所以你必须使用：

<img ng-src="holder.js/{{fragment.dimension.width}}x{{fragment.dimension.height}}" />

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!