How to use resolve with Angular 1.5 *components* and UI Bootstrap Modal

10
votes

I am trying to pass data to a ubi modal that is an Angular 1.5 component using resolve. I know this is possible because it shows that resolve is supported for components in the uib modal documentation.

component (Type: string, Example: myComponent) - A string reference to the component to be rendered that is registered with Angular's compiler. If using a directive, the directive must have restrict: 'E' and a template or templateUrl set.

It supports these bindings:

(...)

resolve - An object of the modal resolve values. See UI Router resolves for details.

All the examples I am finding declare templateurl/controller in the open method. Then the item declared in resolve is injected into to the controller. I am passing an Angular 1.5 component to the modal (not templateurl/controller), and when I try to inject the item from resolve, I get a dreaded "unknow provider" error.

Here is my code. I am trying to pass a url.

Controller of component calling the model

ParentController.$inject = ['$uibModal'];

function ParentController $uibModal) {
  var $ctrl = this;

  $ctrl.openComponentModal = function(url) {
    var modalInstance = $uibModal.open({
      animation: false,
      component: "ImageModalComponent",
      resolve: {
        url: function() {
          return url;
        }
      }
    });
  };
}

Controller in component that is the modal

ImageModalController.$inject = ['url'];

function ImageModalController(url) {
  var $ctrl = this;

  $ctrl.$onInit = function() {
    console.log(url);
  };

}
1
angularjsmodal-dialogcomponentsresolve

1 Answers

13
votes

For components, resolve needs to be added to the bindings, then it is available on the isolated scope. In other words, add resolve: '<' when declaring the component.

Modal Component 

var template = require('./image_modal.component.html');
var ImageModalController = require('./image_modal.controller');

module.exports = {
  template: template,
  bindings: {
    close: '&',
    resolve: ‘<‘
  },

  controller: ImageModalController
};

Controller of component calling the model

ParentController.$inject = ['$uibModal'];
function ParentController $uibModal){
  var $ctrl = this;

     $ctrl.openComponentModal = function (urlFromClickEvent) {
        var modalInstance = $uibModal.open({
          animation: false,
          component: "ImageModalComponent",
          resolve: {
            url: function() {
              return url;
            }
          }
        });
      };
}

Controller of component that is the modal

ImageModalController.$inject = [];
function ImageModalController() {
  var $ctrl = this;
  
  $ctrl.$onInit = function () {
    console.log($ctrl.resolve.url);
  };
}