1

I feel like I'm missing something obvious here, but I'm still stymied.

I update Thing on the scope by calling the create function on the ThingFactory. But when I reference the scope from PromoteController, the scope still contains the old version of Thing (with ID of 1).

This seems like a place where I'd want to use $scope.$apply(), but that causes the 'digest already in progress' error.

What am I missing?

var app = angular.module('app', ['ngRoute']);

  app.factory('ThingFactory', ['$http', '$q', '$routeParams', function ($http, $q, $routeParams) {

  var deferred = $q.defer();

  return {
      get: function(id) {

          var thing = {
              id: 393,
              name: 'Can I be gotten?',
              description: 'get'
          };
          deferred.resolve(thing);
          return deferred.promise;
      },
      save: function (thing) {
          console.log("ThingFactory -> CREATE");
          var thing = {
              id: 122,
              name: 'after create.',
              description: 'creatine'
          };
          deferred.resolve(thing);

          return deferred.promise;
      },
      init: function() {
          console.log("ThingFactory -> INIT");
          var thing = {
              id: 1,
              name: 'initial value',
              description: 'INIT'
          };
          deferred.resolve(thing);
          return deferred.promise;
      }
  };

}]);

app.config(function ($routeProvider, $locationProvider, $httpProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider
      .when('/build', {
          templateUrl: '/build.html',
          controller: 'BuildController'
      })
      .when('/things/:id/promote', {
           templateUrl: '/promote.html',
           controller: 'PromoteController'
      })
});


app.controller('BuildController', function ($scope, $http, $location, ThingFactory) {
  // HERE I INITIALIZE THE THING
  ThingFactory.init().then(function(thing) {
      $scope.thing = thing;
  });

  $scope.saveNewThing = function() {
      // HERE I 'SAVE' THE THING
      ThingFactory.save($scope.thing).then(function(thing) {
          $scope.thing = thing;
          $location.path("/" + thing.id + "/promote");
      })
  }

});

app.controller('PromoteController', function ($scope, $http, $routeParams, ThingFactory) {
  // HERE'S WHERE THE THING ON THE SCOPE SHOULD HAVE AN ID OF 122,
  // BUT IS STILL 1
  var id = $routeParams.id;
  ThingFactory.get({id: id}).then(function(thing) {
      $scope.thing = thing;
  });
});

1 Answer 1

2

please create a var deferred = $q.defer(); for every method in you factory. otherwise you always use the same deferred and this is resolved with the value in your init function.

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

1 Comment

Sure enough that was the problem! Thanks so much for your quick observation.

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.