Angular data binding after ajax

Question

I have route like: /items/item/123/edit
and controller (one controller for view and edit):

...
if ($routeParams.id) {
          $scope.itemId = $routeParams.id;
          $scope.editMode = true;

          Item.getBoxes({id: $routeParams.id}).$promise.then(function (data) {
            $scope.data.boxId = [];

            angular.forEach(data, function (obj) {
              $scope.data.boxId.push(obj.id);
              $scope.boxCache[obj.id] = {id: obj.id, name: {id: obj.id, name: obj.name}};
            });

            $scope.items= data;
          });
        }
...

7 from 8 cases worked correctly but sometimes doesn't bind data to view. I can't coll $scope.$apply() or $scope.$digest() because their in progress

ngLover · Accepted Answer · 2015-07-09 06:14:01Z

2

you can use $scope.$apply only when if they are not in progress.

You can check if a $digest is already in progress by checking $scope.$$phase.

if(!$scope.$$phase) {
  //$digest or $apply
}

Use a safe apply, like this:

$rootScope.$$phase || $rootScope.$apply();

Or another method use this service.

$timeout(function(),millisecond);

you can also use - $evalAsync $evalAsync([expression], [locals]);

Check out this --> https://docs.angularjs.org/api/ng/type/$rootScope.Scope

Choosing between $evalAsync and $timeout depends on your circumstance:

If code is queued using $evalAsync from a directive, it should run after the DOM has been manipulated by Angular, but before the browser renders.
If code is queued using $evalAsync from a controller, it should run before the DOM has been manipulated by Angular (and before the browser renders) -- rarely do you want this
if code is queued using $timeout, it should run after the DOM has been manipulated by Angular, and after the browser renders (which may cause flicker in some cases)

edited Jul 9, 2015 at 6:14

answered Jul 8, 2015 at 11:52

ngLover

4,6183 gold badges23 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alcadur Over a year ago

I tried this but $scope.$$phase was set to $digest even when data wasn't binding

Alcadur Over a year ago

$timeout(function(), 500) helps but I think this don't solve problem forever ;)

ngLover Over a year ago

in your problem i think evalAsync will work fine ..because it works before dom reders, accept answer if works to help others

Collectives™ on Stack Overflow

Angular data binding after ajax

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related