Question

我有一个AngularJS页面，我希望它在单击另一个元素时更改元素的ng-src值。我初始化变量src：

data-ng-init="src='assets/img/projects/1'

然后我做了这个元素：

<img data-ng-src="{{src}}/1.jpg" id="img1">

最后我希望当有人点击我的链接时，它会将src更改为{{src}}/1a.jpg，所以我尝试了这个：

<a href="javascript:void(0)" data-ng-click="selectImage('lists/1.html');document.getElementById('img1').setAttribute('data-ng-src', '{{src}}/1a.jpg');"></a>

（不关心我的空链接，我知道如何点击它...），我的问题是，src的值没有改变，我的页面仍然是第一个图像，我怎样才能改进我的代码将值{{src}}/1.jpg更改为{{src}}/1a.jpg？

Answer 1

非常非常错误的代码，您将标准DOM修改与角度结合起来。只选择一种不以这种方式组合的解决方案。检查我的示例代码：

var app=angular.module("image",[]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="image" ng-init="src='https://www.gravatar.com/avatar/161dac2e231b0f6b4340000328e18bcf?s=328&d=identicon&r=PG&f=1'">
<img data-ng-src="{{src}}" id="img1">


<button ng-click="src='https://www.gravatar.com/avatar/a5af44879d481c3c15a4b2dd55007322?s=328&d=identicon&r=PG'" >Change image src to different</button>
</div>

所以只将src范围变量设置为不同的src，它就像魅力一样。

ng-click="src='different src'"

Answer 2

创建新的varibale 图片

data-ng-init="src='assets/img/projects/1'; image='1.jpg'"

然后HTML元素

<img data-ng-src="{{src}}/{{image}}" id="img1">

如果有人点击你链接，则更改图片值

<a href="javascript:void(0)" data-ng-click="selectImage('lists/1.html'); image='1a.jpg'"></a>

希望这有帮助！感谢。

Answer 3

设置 - 单击以在控制器中运行，更改＆＃34; src＆＃34;范围内的变量。

更改ng-src值onclick

3 个答案: