How to use resolve with Angular 1.5 *components* and UI Bootstrap Modal
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); };}