当模型改变时，angularjs图像src会发生变化
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了当模型改变时，angularjs图像src会发生变化相关的知识，希望对你有一定的参考价值。
我正在服务器上旋转图像，我想知道如何在我的页面上显示图像更改？
我想我必须使用$ scope。$ apply（）但每次我使用它时都会收到错误消息“正在进行摘要循环”
template.html
< img src='{{tempimagefilepath}}/> <!--image-->
controller.js
photoalbumServ.rotate_photo(post).then(function(data) {
//after server modifies photo
$scope.tempimagefilepath = $scope.baseurl + "user_images/user_43/temp/123-temp.jpg";
$scope.$apply();
});
谢谢
解：
我的解决方案是更改范围值{{tempimagefilepath}}，以便图像更改。这要求我在旋转图像时不断重命名服务器上的文件。
答案
两件事情。首先，你应该使用ng-src而不是src来阻止你的客户在angular评估表达式之前尝试加载图像。
其次，通过$apply()函数回调，进行必要的范围更改：
photoalbumServ.rotate_photo(post).then(function(data) {
//after server modifies photo
$scope.$apply(function() {
$scope.tempimagefilepath = $scope.baseurl + "user_images/user_43/temp/123-temp.jpg";
});
});
另一答案
我认为这是因为您的浏览器缓存。不需要$ apply（）
试试这个
var random = (new Date()).toString();
$scope.tempimagefilepath = newUrl + "?cb=" + random;
另一答案
您可以尝试使用ng-src而不是src
<img ng-src="{{tempimagefilepath}}" />
我认为你不需要做范围。$ apply（）;然后
另一答案
我有同样的问题，我有一个<user-picture>指令，在用户设置页面上，用户可以更改他的图片。图片来自像url + token这样的api。当我从数据库中更改图片时，我获得了成功，然后我需要在指令的每个实例上更新ng-src="{{mainCtrl.picture.src}}"文件。
这是指令：
angular.module('appApp')
.directive('userPicture', function() {
return {
restrict: 'E',
template: '<img class="img-responsive" ng-src="{{mainCtrl.picture.src}}" />',
controller: 'UserPictureCtrl',
scope: true,
replace: true
}
})
.controller('UserPictureCtrl',['$scope', '$resource', 'HelpersService', '$sessionStorage',
function ($scope, $resource, HelpersService, $sessionStorage) {
$scope.mainCtrl.picture = {};
$scope.mainCtrl.picture.src = HelpersService.domain + 'user/getPictureAsStream?token=' + $sessionStorage.token;
}]);另一答案
Template HTML
< img ng-src='{{tempimagefilepath}}/>
AngularJS Code
photoalbumServ.rotate_photo(post).then(function(data) {
//after server modifies photo
$scope.$apply(function() {
$scope.tempimagefilepath = $scope.baseurl + "user_images/user_43/temp/123-temp.jpg";
});
});
另一答案
像其他人说的那样使用ng-src。但是参考你的控制器很重要
<div ng-controller = "controller">
<img ng-src="{{tempimagefilepath}}" />
</div>
以上是关于当模型改变时，angularjs图像src会发生变化的主要内容，如果未能解决你的问题，请参考以下文章