angularjs - 在 ng-src 中使用 {{}} 绑定，但 ng-src 不加载答案

【问题标题】：angularjs - using {{}} binding inside ng-src but ng-src doesn't loadangularjs - 在 ng-src 中使用 {{}} 绑定，但 ng-src 不加载
【发布时间】：2013-05-06 08:08:22
【问题描述】：

我一直在尝试将值绑定到 img HTML 元素的 ng-src，但无济于事。

HTML 代码：

<div ng-controller='footerCtrl'>
<a href="#"><img ng-src="{{avatar_url}}"/></a>
</div>

AngularJS 代码：

app.controller('footerCtrl',function($scope, userServices)
{
$scope.avatar_url='';
$scope.$on('updateAvatar', function()
{$scope.avatar_url = userServices.getAvatar_url();}
);
}

app.factory('userServices', function($rootScope){ 
var avatar_url='';
return{  setAvatar_url: function(newAvatar_url)
{ avatar_url = newAvatar_url; $rootScope.$broadcast('updateAvatar');}}
);

我想在每次更新用户服务中的相应变量（avatar_url）时更新ng-src 中的avatar_url 变量。用户服务中的变量通过对服务器的 http.POST 请求进行更新。我检查了来自服务器的响应确实更新了用户服务中的变量，然后将其广播到 footerCtrl 中的 avatar_url 变量。

然而，图像元素 HTML 根本不反映这些变化。事实上，我也尝试过将 avatar_url 变量预设为我页面中一张图片的相对路径，图片仍然没有显示（ng-src 值为空）。 T

【问题讨论】：

在userServices 中你有一个setAvatar_url 函数，而在控制器中你使用getAvatar_url 函数。会不会是这个问题？
嗨，很抱歉回复的延迟，也许小提琴jsfiddle.net/jiaming/DvNA9/1在解释代码时会更清楚。感谢您的宝贵时间。
你的 jsfiddle 充满了 bug...
我正在寻找 ng-src 属性以供使用，问题已经给了我答案，谢谢！ :)

标签： angularjs

【解决方案1】：

更改ng-src 的值实际上非常简单。像这样：

<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
</head>
<body>
<img ng-src="{{img_url}}">
<button ng-click="img_url = 'https://farm4.staticflickr.com/3261/2801924702_ffbdeda927_d.jpg'">Click</button>
</body>
</html>

这是一个工作示例的 jsFiddle：http://jsfiddle.net/Hx7B9/2/

【讨论】：

谢谢。这就是我真正想做的事情：jsfiddle.net/jiaming/DvNA9/12。但主要问题是我在应用引擎服务器中将其渲染为 jinja 模板，这导致与所有 {{}} 大括号发生冲突。
哦，你的意思是。如果您愿意，可以更改{{}}：jsfiddle.net/THjQe/1
哇，谢谢你的回复，我不知道你能做到。 (:
在更改 Angular 的 {{}} 之前，您可能需要确保没有破坏任何插件。有一些依赖{{}}。

【解决方案2】：

我们可以使用ng-src，但当ng-src's value 变为null、'' 或undefined、ng-src 时将不起作用。所以在这种情况下只需使用ng-if：

http://jsfiddle.net/Hx7B9/299/

<div ng-app>
    <div ng-controller="AppCtrl"> 
        <a href='#'><img ng-src="{{link}}" ng-if="!!link"/></a>
        <button ng-click="changeLink()">Change Image</button>
    </div>
</div>

【讨论】：

谢谢。这是一个错误。让我很困惑。 ng-src 正在显示以前的图像。