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

Question

I am rotating an image on the server and I was wondering how to show the image change on my page?

I think I have to use $scope.$apply() but everytime I use it i get the error message "digest cycle in progress"

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

thanks

Solution:

My solution was changing the scope value {{tempimagefilepath}} so the image will change. That required me to constantly rename the file on the server when I rotate the image.

Answer 1

Two things. First, you should use ng-src rather than src to prevent your clients attempting to load the image before angular has evaluated the expression.

Second, you pass $apply() a function callback that makes the necessary scope changes:

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

I think this is because your browser cache. don't need $apply()

try this

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

Answer 3

You can try and use ng-src instead of src

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

I don't think you need to do $scope.$apply(); then

Answer 4

I had the same problem, I had a <user-picture> directive and on the user settings page the user can change his picture. The picture comes from an api like url + token . When I change the picture from the database I get success and then I need to update the ng-src="{{mainCtrl.picture.src}}" file on every instance of the directive.

This is the directive:

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

I am binding the ng-src="url file address string" from the mainCtrl. When I am changing the picture on the database I am reassigning the value of the $scope.mainCtrl.picture.src to the same url + token, but I all sow add in an extra &rand url parameter sow the url looks like this: http://<domain>/<serverApi>/user/getPictureAsStream?token=65145d12-f033-41f1-b101-9ed846352284&rand=0.6513215699 , pay attention to the last parameter, &rand=0.6513215699 . This is telling to the browser that it is a different file from a different url and makes a get request to the server for it, on the server instead, the extra parameter is ignored sow it gives me the new picture even if it is located in the same location. And like that it updates the directive image.

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

use ng-src as the others said. But it is important to refere to your controller

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