Angular-UI Modal resolve

Question

Dear all I am new to Angularjs and I am trying creating a modal. One of the example I have found online (and currently following), is the below one, which I find difficult to understand.

$scope.checkout = function (cartObj) {
  var modalInstance = $modal.open({
  templateUrl : 'assets/menu/directives/payment-processing-modal.tmpl.html',
  controller : ["$scope", "$modalInstance", "cartObj", function($scope, $modalInstance, cartObj) {
  }],
  resolve : { // This fires up before controller loads and templates rendered
    cartObj : function() {
       return cartObj;
    }
  }
});
               

What I am confused about is cartObj which I already received as a parameter for my function is passed to my controller through dependency injection. However why I have to create a function named cartObj and return that variable. It seems confusing. Can anyone please help ?

Answer 1

Here's the line-by-line breakdown:

$scope.checkout = function (cartObj) {

A $scope variable named checkout is being created which references a function so that you can call it in the view as checkout() (for example from a button with ng-click="checkout").

This function is passed a service called cartObj.

var modalInstance = $modal.open({

A variable called modalInstance is used to call the $modal service open method.

The UI Bootstrap $modal service returns a modal instance. The open method is passed an object that defines the modal instance configuration as follows:

templateUrl : 'assets/menu/directives/payment-processing-modal.tmpl.html',

This says that the modal instance should use the template found at the respective url.

controller : ["$scope", "$modalInstance", "cartObj", function($scope, $modalInstance, cartObj) {
  }],

This creates a controller for the modal instance that is passed the $scope, the $modalInstance service and, importantly, the resolved cartObj service.

Services are singletons that are used to share data across controllers. That means that there is one version of the cartObj service and if one controller updates it, another controller can query the service and get the data that was updated by any other controller. That's great, but if a variable needs to be initialized with some value from the service when the controller loads, it will return undefined because it has to first ask for and then wait to get the data back. That's where resolve comes in:

  resolve : { // This fires up before controller loads and templates rendered
    cartObj : function() {
       return cartObj;
    }
  }
});

The reason here for using resolve is probably because the template itself is dependent upon some data from the cartObj being available WHEN the template is loaded. Resolve will resolve the promises BEFORE the controller loads so that when it does, the data is there and ready. Basically, resolve simplifies the initialization of the model inside a controller because the initial data is given to the controller instead of the controller needing to go out and fetch the data.

The resolved cartObj is what is passed to the modalInstance and can therefore be accessed in the controller as: cartObj.someproperty.