6

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.

Improve this question
3
  • Can you share your code for rotate_phone? If you are using $resource or $http, you shouldn't need to call $apply. Commented Oct 11, 2013 at 6:45
  • You are right I didn't need to use$apply as I was using $http to make fcalls to the server to rotate my image Commented Oct 16, 2013 at 1:51
  • one solution I think might work is setting the $scope.temimagefilepath=''(empty string) inside the .then callback. and on the very next line reassigning it the actual image url value path. Also this should be done when using ng-src on the element Commented Apr 5, 2015 at 6:09

6 Answers 6

Reset to default
7

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"; 
    });
});
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

It sounds like you don't need the $apply() call at all then because your then callback is already within a scope digest. $apply just really tells Angular to watch for any changes (the digest cycle). Most built-in angular constructs do this automatically. You only need to call $apply() yourself when using other libraries like jQuery and their callbacks are outside of angular's call-chain.
Yes I think that's the case.However how then do I get my image to change when the actual image the ng-src is pointing to changes? I see that the image only changes when the url in ng-src="{{url}}" changes.
That's the power of reactive programming. You're template will update automatically when the value on the scope changes. If you create a jsFiddle/plunkr of your whole setup, I can help you identify your issue.
I ended up changing the scope value to make the ng-src change images.
4

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

try this

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

1 Comment

Yes, this worked for me. Did not need to use $apply. Just changing $scope.imagePath in the controller updated ng-src="{{imagePath}}" and refreshed the image. Angular version 1.3.15
2

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

Improve this answer

Comments

0

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.

Improve this answer

Comments

0 
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"; 
    });
});
Improve this answer

Comments

0

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>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.