当模型改变时，angularjs图像src会发生变化

Question

我正在服务器上旋转图像，我想知道如何在我的页面上显示图像更改？

我想我必须使用$ 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}}，以便图像更改。 这要求我在旋转图像时不断重命名服务器上的文件。

Answer 1

两件事情。 首先，您应该使用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"; 
    });
});

Answer 2

我认为这是因为您的浏览器缓存。 不需要$ apply（）

尝试这个

var random = (new Date()).toString();
$scope.tempimagefilepath = newUrl + "?cb=" + random;

Answer 3

您可以尝试使用ng-src而不是src

<img ng-src="{{tempimagefilepath}}" />

我认为你不需要做范围。$ apply（）; 然后

Answer 4

我有同样的问题，我有一个<user-picture>指令，在用户设置页面上，用户可以更改他的图片。 图片来自api like url + token 。 当我从数据库中更改图片时，我获得了成功，然后我需要在指令的每个实例上更新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; }]); 

我从mainCtrl绑定ng-src="url file address string" 。 当我更改数据库上的图片时，我将$ scope.mainCtrl.picture.src的值重新分配给相同的url +标记，但是我都播种了一个额外的&rand url参数播种网址如下所示： http://<domain>/<serverApi>/user/getPictureAsStream?token=65145d12-f033-41f1-b101-9ed846352284&rand=0.6513215699 ，注意最后一个参数， &rand=0.6513215699 。 这告诉浏览器它是一个与不同url不同的文件并向服务器发出get请求，而在服务器上则忽略了额外的参数，即使它位于同一个地方。 就像它更新指令图像。

Answer 5

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"; 
    });
});

Answer 6

像其他人说的那样使用ng-src。 但重要的是要参考你的控制器

   <div ng-controller = "controller">
     <img ng-src="{{tempimagefilepath}}" />
   </div>