Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Commit

Permalink
feat(modal): support $uibModalInstance
Browse files Browse the repository at this point in the history
- Add support for `$uibModalInstance` as a controller local
- Deprecate `$modalInstance` support

Closes #4638
Closes #4661
  • Loading branch information
wesleycho committed Oct 19, 2015
1 parent 7c3c631 commit 97fd37e
Show file tree
Hide file tree
Showing 4 changed files with 33 additions and 23 deletions.
6 changes: 3 additions & 3 deletions src/modal/docs/demo.js
Expand Up @@ -34,18 +34,18 @@ angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $uibModal service used above.

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {

$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};

$scope.ok = function () {
$modalInstance.close($scope.selected.item);
$uibModalInstance.close($scope.selected.item);
};

$scope.cancel = function () {
$modalInstance.dismiss('cancel');
$uibModalInstance.dismiss('cancel');
};
});
2 changes: 1 addition & 1 deletion src/modal/docs/readme.md
Expand Up @@ -6,7 +6,7 @@ The `$uibModal` service has only one method: `open(options)` where available opt
* `templateUrl` - a path to a template representing modal's content
* `template` - inline template representing the modal's content
* `scope` - a scope instance to be used for the modal's content (actually the `$uibModal` service is going to create a child scope of a provided scope). Defaults to `$rootScope`
* `controller` - a controller for a modal instance - it can initialize scope used by modal. Accepts the "controller-as" syntax in the form 'SomeCtrl as myctrl'; can be injected with `$modalInstance`
* `controller` - a controller for a modal instance - it can initialize scope used by modal. Accepts the "controller-as" syntax in the form 'SomeCtrl as myctrl'; can be injected with `$uibModalInstance`
* `controllerAs` - an alternative to the controller-as syntax, matching the API of directive definitions. Requires the `controller` option to be provided as well
* `bindToController` - when used with `controllerAs` & set to `true`, it will bind the $scope properties onto the controller directly
* `resolve` - members that will be resolved and passed to the controller as locals; it is equivalent of the `resolve` property for AngularJS routes
Expand Down
15 changes: 12 additions & 3 deletions src/modal/modal.js
Expand Up @@ -554,8 +554,8 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap'])
backdrop: true, //can also be false or 'static'
keyboard: true
},
$get: ['$injector', '$rootScope', '$q', '$templateRequest', '$controller', '$uibModalStack',
function ($injector, $rootScope, $q, $templateRequest, $controller, $modalStack) {
$get: ['$injector', '$rootScope', '$q', '$templateRequest', '$controller', '$uibModalStack', '$modalSuppressWarning', '$log',
function ($injector, $rootScope, $q, $templateRequest, $controller, $modalStack, $modalSuppressWarning, $log) {
var $modal = {};

function getTemplatePromise(options) {
Expand Down Expand Up @@ -641,7 +641,16 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap'])
//controllers
if (modalOptions.controller) {
ctrlLocals.$scope = modalScope;
ctrlLocals.$modalInstance = modalInstance;
ctrlLocals.$uibModalInstance = modalInstance;
Object.defineProperty(ctrlLocals, '$modalInstance', {
get: function() {
if (!$modalSuppressWarning) {
$log.warn('$modalInstance is now deprecated. Use $uibModalInstance instead.');
}

return modalInstance;
}
});
angular.forEach(modalOptions.resolve, function(value, key) {
ctrlLocals[key] = tplAndVars[resolveIter++];
});
Expand Down
33 changes: 17 additions & 16 deletions src/modal/test/modal.spec.js
Expand Up @@ -531,47 +531,47 @@ describe('$uibModal', function () {

describe('controller', function() {
it('should accept controllers and inject modal instances', function() {
var TestCtrl = function($scope, $modalInstance) {
var TestCtrl = function($scope, $uibModalInstance) {
$scope.fromCtrl = 'Content from ctrl';
$scope.isModalInstance = angular.isObject($modalInstance) && angular.isFunction($modalInstance.close);
$scope.isModalInstance = angular.isObject($uibModalInstance) && angular.isFunction($uibModalInstance.close);
};

open({template: '<div>{{fromCtrl}} {{isModalInstance}}</div>', controller: TestCtrl});
expect($document).toHaveModalOpenWithContent('Content from ctrl true', 'div');
});

it('should accept controllerAs alias', function() {
$controllerProvider.register('TestCtrl', function($modalInstance) {
$controllerProvider.register('TestCtrl', function($uibModalInstance) {
this.fromCtrl = 'Content from ctrl';
this.isModalInstance = angular.isObject($modalInstance) && angular.isFunction($modalInstance.close);
this.isModalInstance = angular.isObject($uibModalInstance) && angular.isFunction($uibModalInstance.close);
});

open({template: '<div>{{test.fromCtrl}} {{test.isModalInstance}}</div>', controller: 'TestCtrl as test'});
expect($document).toHaveModalOpenWithContent('Content from ctrl true', 'div');
});

it('should respect the controllerAs property as an alternative for the controller-as syntax', function() {
$controllerProvider.register('TestCtrl', function($modalInstance) {
$controllerProvider.register('TestCtrl', function($uibModalInstance) {
this.fromCtrl = 'Content from ctrl';
this.isModalInstance = angular.isObject($modalInstance) && angular.isFunction($modalInstance.close);
this.isModalInstance = angular.isObject($uibModalInstance) && angular.isFunction($uibModalInstance.close);
});

open({template: '<div>{{test.fromCtrl}} {{test.isModalInstance}}</div>', controller: 'TestCtrl', controllerAs: 'test'});
expect($document).toHaveModalOpenWithContent('Content from ctrl true', 'div');
});

it('should allow defining in-place controller-as controllers', function() {
open({template: '<div>{{test.fromCtrl}} {{test.isModalInstance}}</div>', controller: function($modalInstance) {
open({template: '<div>{{test.fromCtrl}} {{test.isModalInstance}}</div>', controller: function($uibModalInstance) {
this.fromCtrl = 'Content from ctrl';
this.isModalInstance = angular.isObject($modalInstance) && angular.isFunction($modalInstance.close);
this.isModalInstance = angular.isObject($uibModalInstance) && angular.isFunction($uibModalInstance.close);
}, controllerAs: 'test'});
expect($document).toHaveModalOpenWithContent('Content from ctrl true', 'div');
});

it('should allow usage of bindToController', function() {
open({template: '<div>{{test.fromCtrl}} {{test.isModalInstance}}</div>', controller: function($modalInstance) {
open({template: '<div>{{test.fromCtrl}} {{test.isModalInstance}}</div>', controller: function($uibModalInstance) {
this.fromCtrl = 'Content from ctrl';
this.isModalInstance = angular.isObject($modalInstance) && angular.isFunction($modalInstance.close);
this.isModalInstance = angular.isObject($uibModalInstance) && angular.isFunction($uibModalInstance.close);
}, controllerAs: 'test', bindToController: true});
expect($document).toHaveModalOpenWithContent('Content from ctrl true', 'div');
});
Expand Down Expand Up @@ -1201,7 +1201,7 @@ describe('$modal deprecation', function() {
inject(function($modal, $timeout, $log, $rootScope) {
spyOn($log, 'warn');

$modal.open({template: '<div>Foo</div>'});
$modal.open({template: '<div>Foo</div>', controller: function($modalInstance) {}});
$rootScope.$digest();
$timeout.flush(0);
expect($log.warn.calls.count()).toBe(0);
Expand Down Expand Up @@ -1229,16 +1229,17 @@ describe('$modal deprecation', function() {
'</div>';
$templateCache.put('template/modal/window.html', windowTemplate);

$modal.open({template: '<div>Foo</div>'});
$modal.open({template: '<div>Foo</div>', controller: function($modalInstance) {}});
$rootScope.$digest();
$timeout.flush(0);

expect($log.warn.calls.count()).toBe(5);
expect($log.warn.calls.count()).toBe(6);
expect($log.warn.calls.argsFor(0)).toEqual(['$modal is now deprecated. Use $uibModal instead.']);
expect($log.warn.calls.argsFor(1)).toEqual(['$modalStack is now deprecated. Use $uibModalStack instead.']);
expect($log.warn.calls.argsFor(2)).toEqual(['modal-animation-class is now deprecated. Use uib-modal-animation-class instead.']);
expect($log.warn.calls.argsFor(1)).toEqual(['$modalInstance is now deprecated. Use $uibModalInstance instead.']);
expect($log.warn.calls.argsFor(2)).toEqual(['$modalStack is now deprecated. Use $uibModalStack instead.']);
expect($log.warn.calls.argsFor(3)).toEqual(['modal-animation-class is now deprecated. Use uib-modal-animation-class instead.']);
expect($log.warn.calls.argsFor(4)).toEqual(['modal-transclude is now deprecated. Use uib-modal-transclude instead.']);
expect($log.warn.calls.argsFor(4)).toEqual(['modal-animation-class is now deprecated. Use uib-modal-animation-class instead.']);
expect($log.warn.calls.argsFor(5)).toEqual(['modal-transclude is now deprecated. Use uib-modal-transclude instead.']);

$log.warn.calls.reset();
$compile('<div modal-backdrop></div>')($rootScope);
Expand Down

0 comments on commit 97fd37e

Please sign in to comment.