Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Scope not updating in the view after promise is resolved

Tags:

angularjs

Even though there is a similar question for this Data is not getting updated in the view after promise is resolved but I am already using this approach and the view is not being updated.

I have a factory:

'use strict';

myApp
.factory('Factory1', [ '$http','$q','$location', '$rootScope', 'Service', function($http, $q, $location, $rootScope, Service){

    return {

        checkSomething: function(data){

          var deferred = $q.defer();  //init promise

          Service.checkSomething(data,function(response){
                // This is a response from a get request from a service
                deferred.resolve(response);
          });

          return deferred.promise;
        }
    };
}]);

I have a controller:

'use strict';

myApp
.controller('MyCtrl', ['$rootScope', '$scope', '$location','Service', 'Factory1' function($rootScope, $scope, $location, Service, Factory1) {


    if(Service.someCheck() !== undefined)
    {
      // Setting the variable when view is loaded for the first time, but this shouldn't effect anything
      $scope.stringToDisplay = "Loaded";

    }


    $scope.clickMe = function(){
      Factory1.chechSomething($scope.inputData).then(function(response){
          $scope.stringToDisplay = response.someData; // The data here is actually being loaded!

      });
    };

}]);

And the view:

<div class="app " ng-controller="MyCtrl">    
    {{stringToDisplay}}    
    <button class="button" ng-click="clickMe()">Update display</button>    
</div>

But the data is not being updated in the view when I click on a button "Update display". Why?

Even though the $scope is being loaded with the data

EDIT:

Hm, it seems that I am getting a error when I try $scope.$apply() and it says:

[$rootScope:inprog] $digest already in progress
like image 697
Aleks Avatar asked Feb 26 '14 09:02

Aleks


People also ask

What is q defer()?

$q. defer() allows you to create a promise object which you might want to return to the function that called your login function.

Why we use$ q in AngularJS?

$q is integrated with the $rootScope. Scope Scope model observation mechanism in AngularJS, which means faster propagation of resolution or rejection into your models and avoiding unnecessary browser repaints, which would result in flickering UI. Q has many more features than $q, but that comes at a cost of bytes.

What does$ q do in AngularJS?

$q is an angular defined service. It's the same as new Promise(). But $q takes things to the next level by enhancing additional feature that developers can use to perform complex tasks more simply. resolve(value) – resolves the derived promise with the value.

How to use promise in AngularJS?

Example of a Promise // We create our promise $http. get('api/status') // that once complete will call either our success callback function // or our error callback function . then(function success(response) { // handle our response object $log. log(response); }, function error(response) { // handle our error $log.


1 Answers

This might be a digest cycle issue. You could try:

...
$scope.stringToDisplay = response.someData;
$scope.$apply();
...

For the sake of completeness, here is a nice wrap-up of $scope.$apply.

Edit: I tried to reproduce the error in this fiddle, but cannot seem to find any issues. It works flawlessly without $scope.$apply. I use setTimeout in order to simulate asynchronous operations, which should not trigger a digest cycle by itself.

like image 96
Michael Jess Avatar answered Sep 27 '22 18:09

Michael Jess