在 ng-repeat 循环中将依赖项注入到 HTML img src 标记中不起作用答案

【问题标题】：Dependency injection into HTML img src tag within an ng-repeat loop not working在 ng-repeat 循环中将依赖项注入到 HTML img src 标记中不起作用
【发布时间】：2016-06-07 18:14:58
【问题描述】：

我的 a 值无法正常工作有一个奇怪的问题。基本上我有一大堆 id 对应于服务器上的图像。

Images: {
    "Set1" : {
        'Blue':['8277','8278','8279','8280','8281','8282','8283'],
        'Green':['8284','8285'],
        'Red':['8286','8287','8288','8289']
    }
}

在我的控制器模型中，我有一个看起来像这样的ng-repeat。

<div ng-controller="myCtl">
    <div ng-repeat="(key, value) in cities">
        <p> 
            <img src="http://wesbite.api.com/{{value[0]}}/half?system=xxxxml&pubtoken=hfdshfgsjkhgkhfkjghkdshgjkshfhdffhksfhgdfhgdskhsgkf4658cee&refreshRate=2000">
        </p>
    </div>
</div>

我的问题是它实际上不会将 img 解析到页面上。如果我以任何其他方式拉入 imgs，它就可以正常工作。

在 ng-repeat 循环中混合 HTML 是否存在问题？

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

使用 ng-src 代替 src

<img ng-src="http://wesbite.api.com/{{value[0]}}/half?system=xxxxml&pubtoken=hfdshfgsjkhgkhfkjghkdshgjkshfhdffhksfhgdfhgdskhsgkf4658cee&refreshRate=2000">

【讨论】：

【解决方案2】：

在 src 属性中使用像 {{hash}} 这样的 Angular 标记不能正常工作：浏览器将从带有文字文本 {{hash}} 的 URL 获取，直到 Angular 替换 {{hash}} 中的表达式。 ngSrc 指令解决了这个问题。

文档：https://docs.angularjs.org/api/ng/directive/ngSrc

 <div ng-controller="myCtl">
        <div ng-repeat="(key, value) in cities">
                <p> <img ng-src="http://wesbite.api.com/{{value[0]}}/half?system=xxxxml&pubtoken=hfdshfgsjkhgkhfkjghkdshgjkshfhdffhksfhgdfhgdskhsgkf4658cee&refreshRate=2000"></p>
        </div>
</div>

【讨论】：