Angularjs route resolve not populating model before loading controller

Question

I am trying to populate my model from backend(with label and messages) before my contoller get loads. My method is working fine it connects with backend and gets the data but when I am viewing that variable in controller it is coming as undefined. My variable is "Model"

This is my route file

mainApp
    .config(["$routeProvider", function ($routeProvider) {
        .when(AngularRoutesFactory.AIMSAdmin.SearchBookings, {
              templateUrl: aimsAdminViewBase + "Bookings/SearchBookings.html",
              controller: "SearchPerioperativeBookingController",
              resolve: {
                  "Model": function (BookingFactory) {
                      return BookingFactory.GetSearchModel();
                  }
              },
              requireAIMSAuthorizeUser: true
          })
          .otherwise({
              redirectTo: AngularRoutesFactory.MainApp.BaseUrl
          });
    }]);

My Factory is

mainApp.factory("BookingFactory", ["$location", "MainFactory",
function ($location, MainFactory) {
 bookingsFactory.GetSearchModel = function () {
        bookingsFactory.MainFactory.QueryAPI(apiEndpoint + "GetSearchModel", "GET", function (response) {
            bookingsFactory.SearchBookingCriteria = response;
            return bookingsFactory.SearchBookingCriteria;
        }, null, null, bookingsFactory.LangInfo.Message_GettingBookingModel);
    }
 return bookingsFactory;


}]);

And this is my controller

mainApp.controller("SearchBookingController", ["$scope", "BookingFactory", "$rootScope", "$location"
, function ($scope, BookingFactory, $rootScope, $location, Model) {
    $scope.bbb = Model;

}]);

Fedaykin · Accepted Answer · 2014-08-08 00:12:50Z

1

Edit:

Try handling it this way:

mainApp.config(["$routeProvider", "$q", function ($routeProvider, $q) {
    .when(AngularRoutesFactory.AIMSAdmin.SearchBookings, {
          templateUrl: aimsAdminViewBase + "Bookings/SearchBookings.html",
          controller: "SearchPerioperativeBookingController",
          resolve: {
              Model: function (BookingFactory, $q) {

                  var deferred = $q.defer();
                  BookingFactory.GetSearchModel().then(
                            function (data) {
                                deferred.resolve(data);
                            }, function () {
                                deferred.reject();
                            }
                        );
                  return deferred.promise;
              }
          },
          requireAIMSAuthorizeUser: true
      })
      .otherwise({
          redirectTo: AngularRoutesFactory.MainApp.BaseUrl
      });
}]);

edited Aug 8, 2014 at 0:12

answered Aug 7, 2014 at 23:37

Fedaykin

4,5723 gold badges25 silver badges32 bronze badges

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

8 Comments

Atul Chaudhary Over a year ago

It is still undefined..:(

Fedaykin Over a year ago

Hmm, what about BookingFactory.GetSearchModel(); is it a promise?

Atul Chaudhary Over a year ago

yes it is cause I am passing my function to main factory which executes that function in then which i think returns promise

Sunil D. Over a year ago

@AtulChaudhary You need to make sure that you return that promise from the resolve. Since you call several functions in the resolve, each of those functions needs to return the promise up to and including the function that is used in the resolve.

Atul Chaudhary Over a year ago

Does that mean I have to use $q method?

|

Atul Chaudhary · Accepted Answer · 2014-08-08 02:29:40Z

0

Took guidance from @Fedaykin and came up with following working solution. Please let me know if it is wrong

I just changed my factory method and resolve function by applying $q.defer method and got it working

Changed my factory GetSearchModel method with following code

bookingsFactory.GetSearchModel = function () {
        bookingsFactory.MainFactory.QueryAPI(apiEndpoint + "GetSearchModel", "GET", function (response) {
            deferred.resolve(response);
        }, null, null, bookingsFactory.LangInfo.Message_GettingBookingModel);
        return deferred.promise;
    }

What I did in route file

var bookingModel= function ($q, BookingFactory) {
    var deferred = $q.defer();
    BookingFactory.GetSearchModel().then(
              function (data) {
                  deferred.resolve(data);
              }, function () {
                  deferred.reject();
              }
          );
    return deferred.promise;
};
bookingModel.$inject = ["$q", "BookingFactory"];

Then in resolve all I did

 .when(AngularRoutesFactory.AIMSAdmin.SearchBookings, {
              templateUrl: aimsAdminViewBase + "Bookings/SearchBookings.html",
              controller: "SearchBookingController",
              resolve: {
                  "Model": bookingModel
              },
              requireAIMSAuthorizeUser: true
          })

And in controller voila I got the value

mainApp.controller("SearchBookingController", ["$scope", "InitializeMainFactory", "$rootScope", "$location", "Model"
, function ($scope, InitializeMainFactory, $rootScope, $location, Model) {

    $scope.Model = Model;

}]);

answered Aug 8, 2014 at 2:29

Atul Chaudhary

3,7321 gold badge35 silver badges52 bronze badges

2 Comments

Fedaykin Over a year ago

thats it! the only difference between this and the one I posted is that you put the function into the bookingModel variable, if you paste that in the resolve part you'll get the same result :D

Atul Chaudhary Over a year ago

you are absolutely right. I just did that to support minification and I think angular guys says that It is good a practice.

Collectives™ on Stack Overflow

Angularjs route resolve not populating model before loading controller

2 Answers 2

8 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related