我有一个 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
?
最佳答案
非常非常错误的代码,你将标准 DOM 修改与 Angular 结合起来。仅选择一种解决方案,不要以这种方式组合。检查我的示例代码:
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'"
关于javascript - 单击时更改 ng-src 值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39472484/