Angularjs src parameter change when model changes

Question

I rotate the image on the server and I was wondering how to show the image change on my page?

I think I need to use $ scope. $ apply (), but every time I use it, I get a "digest cycle in progress" error message

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

Decision:

My solution changed the scope value {{tempimagefilepath}} so that the image changes. This 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 so that your clients do not try to load the image before angular evaluates the expression.

Second, you pass $apply() a callback function 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. no $ apply () required

try it

 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 do not think you need to do $ scope. $ apply (); then

Answer 4

I had the same problem, I had the <user-picture> directive, and on the user settings page, the user could change his image. The image comes from api, like url + token . When I change the image from the database, I get success, and then I need to update the file ng-src="{{mainCtrl.picture.src}}" on each 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 bind ng-src="url file address string" to mainCtrl. When I change the picture in the database, I reassign the value of $ scope.mainCtrl.picture.src to the same token + token, but I sow everything to add to the additional parameter &rand url sow 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 tells the browser that it is a different file from a different URL and makes a request to the server for it, on the server instead the additional parameter is ignored, it gives me a new image, even if it is in the same place. And also it updates the directory 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 others said. But it’s important to refer to your controller

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