Atul Chaudhary
Atul Chaudhary

Reputation: 3736

Angularjs route resolve not populating model before loading controller

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;

}]);

Upvotes: 0

Views: 681

Answers (2)

Atul Chaudhary
Atul Chaudhary

Reputation: 3736

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;

}]);

Upvotes: 0

Fedaykin
Fedaykin

Reputation: 4552

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
      });
}]);

Upvotes: 1

Related Questions