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

Commit 8c7b9e4

Browse files
FoxandxssFoxandxss
committed
feat(modal): add uib- prefix
Closes #4511
1 parent 30e8aa7 commit 8c7b9e4

File tree

7 files changed

+338
-41
lines changed

7 files changed

+338
-41
lines changed

‎src/modal/docs/demo.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {
1+
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {
22

33
$scope.items = ['item1', 'item2', 'item3'];
44

55
$scope.animationsEnabled = true;
66

77
$scope.open = function (size) {
88

9-
var modalInstance = $modal.open({
9+
var modalInstance = $uibModal.open({
1010
animation: $scope.animationsEnabled,
1111
templateUrl: 'myModalContent.html',
1212
controller: 'ModalInstanceCtrl',
@@ -32,7 +32,7 @@ angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope
3232
});
3333

3434
// Please note that $modalInstance represents a modal window (instance) dependency.
35-
// It is not the same as the $modal service used above.
35+
// It is not the same as the $uibModal service used above.
3636

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

‎src/modal/docs/readme.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
`$modal` is a service to quickly create AngularJS-powered modal windows.
1+
`$uibModal` is a service to quickly create AngularJS-powered modal windows.
22
Creating custom modals is straightforward: create a partial view, its controller and reference them when using the service.
33

4-
The `$modal` service has only one method: `open(options)` where available options are like follows:
4+
The `$uibModal` service has only one method: `open(options)` where available options are like follows:
55

66
* `templateUrl` - a path to a template representing modal's content
77
* `template` - inline template representing the modal's content
8-
* `scope` - a scope instance to be used for the modal's content (actually the `$modal` service is going to create a child scope of a provided scope). Defaults to `$rootScope`
8+
* `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`
99
* `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`
1010
* `controllerAs` - an alternative to the controller-as syntax, matching the API of directive definitions. Requires the `controller` option to be provided as well
1111
* `bindToController` - when used with `controllerAs` & set to `true`, it will bind the $scope properties onto the controller directly
@@ -20,7 +20,7 @@ The `$modal` service has only one method: `open(options)` where available option
2020
* `size` - optional suffix of modal window class. The value used is appended to the `modal-` class, i.e. a value of `sm` gives `modal-sm`
2121
* `openedClass` - class added to the `body` element when the modal is opened. Defaults to `modal-open`
2222

23-
Global defaults may be set for `$modal` via `$modalProvider.options`.
23+
Global defaults may be set for `$uibModal` via `$uibModalProvider.options`.
2424

2525
The `open` method returns a modal instance, an object with the following properties:
2626

‎src/modal/modal.js

+241-12
Original file line numberDiff line numberDiff line change
@@ -57,8 +57,8 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap'])
5757
/**
5858
* A helper directive for the $modal service. It creates a backdrop element.
5959
*/
60-
.directive('modalBackdrop', [
61-
'$animate', '$injector', '$modalStack',
60+
.directive('uibModalBackdrop', [
61+
'$animate', '$injector', '$uibModalStack',
6262
function($animate , $injector, $modalStack) {
6363
var $animateCss = null;
6464

@@ -100,8 +100,8 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap'])
100100
}
101101
}])
102102

103-
.directive('modalWindow', [
104-
'$modalStack', '$q', '$animate', '$injector',
103+
.directive('uibModalWindow', [
104+
'$uibModalStack', '$q', '$animate', '$injector',
105105
function($modalStack , $q , $animate, $injector) {
106106
var $animateCss = null;
107107

@@ -203,18 +203,18 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap'])
203203
};
204204
}])
205205

206-
.directive('modalAnimationClass', [
206+
.directive('uibModalAnimationClass', [
207207
function () {
208208
return {
209209
compile: function(tElement, tAttrs) {
210210
if (tAttrs.modalAnimation) {
211-
tElement.addClass(tAttrs.modalAnimationClass);
211+
tElement.addClass(tAttrs.uibModalAnimationClass);
212212
}
213213
}
214214
};
215215
}])
216216

217-
.directive('modalTransclude', function() {
217+
.directive('uibModalTransclude', function() {
218218
return {
219219
link: function($scope, $element, $attrs, controller, $transclude) {
220220
$transclude($scope.$parent, function(clone) {
@@ -225,7 +225,7 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap'])
225225
};
226226
})
227227

228-
.factory('$modalStack', [
228+
.factory('$uibModalStack', [
229229
'$animate', '$timeout', '$document', '$compile', '$rootScope',
230230
'$q',
231231
'$injector',
@@ -424,7 +424,7 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap'])
424424
if (currBackdropIndex >= 0 && !backdropDomEl) {
425425
backdropScope = $rootScope.$new(true);
426426
backdropScope.index = currBackdropIndex;
427-
var angularBackgroundDomEl = angular.element('<div modal-backdrop="modal-backdrop"></div>');
427+
var angularBackgroundDomEl = angular.element('<div uib-modal-backdrop="modal-backdrop"></div>');
428428
angularBackgroundDomEl.attr('backdrop-class', modal.backdropClass);
429429
if (modal.animation) {
430430
angularBackgroundDomEl.attr('modal-animation', 'true');
@@ -433,7 +433,7 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap'])
433433
body.append(backdropDomEl);
434434
}
435435

436-
var angularDomEl = angular.element('<div modal-window="modal-window"></div>');
436+
var angularDomEl = angular.element('<div uib-modal-window="modal-window"></div>');
437437
angularDomEl.attr({
438438
'template-url': modal.windowTemplateUrl,
439439
'window-class': modal.windowClass,
@@ -547,14 +547,14 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap'])
547547
return $modalStack;
548548
}])
549549

550-
.provider('$modal', function() {
550+
.provider('$uibModal', function() {
551551
var $modalProvider = {
552552
options: {
553553
animation: true,
554554
backdrop: true, //can also be false or 'static'
555555
keyboard: true
556556
},
557-
$get: ['$injector', '$rootScope', '$q', '$templateRequest', '$controller', '$modalStack',
557+
$get: ['$injector', '$rootScope', '$q', '$templateRequest', '$controller', '$uibModalStack',
558558
function ($injector, $rootScope, $q, $templateRequest, $controller, $modalStack) {
559559
var $modal = {};
560560

@@ -689,3 +689,232 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.stackedMap'])
689689

690690
return $modalProvider;
691691
});
692+
693+
/* deprecated modal below */
694+
695+
angular.module('ui.bootstrap.modal')
696+
697+
.value('$modalSuppressWarning', false)
698+
699+
/**
700+
* A helper directive for the $modal service. It creates a backdrop element.
701+
*/
702+
.directive('modalBackdrop', [
703+
'$animate', '$injector', '$modalStack', '$log', '$modalSuppressWarning',
704+
function($animate , $injector, $modalStack, $log, $modalSuppressWarning) {
705+
var $animateCss = null;
706+
707+
if ($injector.has('$animateCss')) {
708+
$animateCss = $injector.get('$animateCss');
709+
}
710+
711+
return {
712+
restrict: 'EA',
713+
replace: true,
714+
templateUrl: 'template/modal/backdrop.html',
715+
compile: function(tElement, tAttrs) {
716+
tElement.addClass(tAttrs.backdropClass);
717+
return linkFn;
718+
}
719+
};
720+
721+
function linkFn(scope, element, attrs) {
722+
if (!$modalSuppressWarning) {
723+
$log.warn('modal-backdrop is now deprecated. Use uib-modal-backdrop instead.');
724+
}
725+
if (attrs.modalInClass) {
726+
if ($animateCss) {
727+
$animateCss(element, {
728+
addClass: attrs.modalInClass
729+
}).start();
730+
} else {
731+
$animate.addClass(element, attrs.modalInClass);
732+
}
733+
734+
scope.$on($modalStack.NOW_CLOSING_EVENT, function(e, setIsAsync) {
735+
var done = setIsAsync();
736+
if ($animateCss) {
737+
$animateCss(element, {
738+
removeClass: attrs.modalInClass
739+
}).start().then(done);
740+
} else {
741+
$animate.removeClass(element, attrs.modalInClass).then(done);
742+
}
743+
});
744+
}
745+
}
746+
}])
747+
748+
.directive('modalWindow', [
749+
'$modalStack', '$q', '$animate', '$injector', '$log', '$modalSuppressWarning',
750+
function($modalStack , $q , $animate, $injector, $log, $modalSuppressWarning) {
751+
var $animateCss = null;
752+
753+
if ($injector.has('$animateCss')) {
754+
$animateCss = $injector.get('$animateCss');
755+
}
756+
757+
return {
758+
restrict: 'EA',
759+
scope: {
760+
index: '@'
761+
},
762+
replace: true,
763+
transclude: true,
764+
templateUrl: function(tElement, tAttrs) {
765+
return tAttrs.templateUrl || 'template/modal/window.html';
766+
},
767+
link: function(scope, element, attrs) {
768+
if (!$modalSuppressWarning) {
769+
$log.warn('modal-window is now deprecated. Use uib-modal-window instead.');
770+
}
771+
element.addClass(attrs.windowClass || '');
772+
element.addClass(attrs.windowTopClass || '');
773+
scope.size = attrs.size;
774+
775+
scope.close = function(evt) {
776+
var modal = $modalStack.getTop();
777+
if (modal && modal.value.backdrop && modal.value.backdrop !== 'static' && (evt.target === evt.currentTarget)) {
778+
evt.preventDefault();
779+
evt.stopPropagation();
780+
$modalStack.dismiss(modal.key, 'backdrop click');
781+
}
782+
};
783+
784+
// moved from template to fix issue #2280
785+
element.on('click', scope.close);
786+
787+
// This property is only added to the scope for the purpose of detecting when this directive is rendered.
788+
// We can detect that by using this property in the template associated with this directive and then use
789+
// {@link Attribute#$observe} on it. For more details please see {@link TableColumnResize}.
790+
scope.$isRendered = true;
791+
792+
// Deferred object that will be resolved when this modal is render.
793+
var modalRenderDeferObj = $q.defer();
794+
// Observe function will be called on next digest cycle after compilation, ensuring that the DOM is ready.
795+
// In order to use this way of finding whether DOM is ready, we need to observe a scope property used in modal's template.
796+
attrs.$observe('modalRender', function(value) {
797+
if (value == 'true') {
798+
modalRenderDeferObj.resolve();
799+
}
800+
});
801+
802+
modalRenderDeferObj.promise.then(function() {
803+
var animationPromise = null;
804+
805+
if (attrs.modalInClass) {
806+
if ($animateCss) {
807+
animationPromise = $animateCss(element, {
808+
addClass: attrs.modalInClass
809+
}).start();
810+
} else {
811+
animationPromise = $animate.addClass(element, attrs.modalInClass);
812+
}
813+
814+
scope.$on($modalStack.NOW_CLOSING_EVENT, function(e, setIsAsync) {
815+
var done = setIsAsync();
816+
if ($animateCss) {
817+
$animateCss(element, {
818+
removeClass: attrs.modalInClass
819+
}).start().then(done);
820+
} else {
821+
$animate.removeClass(element, attrs.modalInClass).then(done);
822+
}
823+
});
824+
}
825+
826+
827+
$q.when(animationPromise).then(function() {
828+
var inputsWithAutofocus = element[0].querySelectorAll('[autofocus]');
829+
/**
830+
* Auto-focusing of a freshly-opened modal element causes any child elements
831+
* with the autofocus attribute to lose focus. This is an issue on touch
832+
* based devices which will show and then hide the onscreen keyboard.
833+
* Attempts to refocus the autofocus element via JavaScript will not reopen
834+
* the onscreen keyboard. Fixed by updated the focusing logic to only autofocus
835+
* the modal element if the modal does not contain an autofocus element.
836+
*/
837+
if (inputsWithAutofocus.length) {
838+
inputsWithAutofocus[0].focus();
839+
} else {
840+
element[0].focus();
841+
}
842+
});
843+
844+
// Notify {@link $modalStack} that modal is rendered.
845+
var modal = $modalStack.getTop();
846+
if (modal) {
847+
$modalStack.modalRendered(modal.key);
848+
}
849+
});
850+
}
851+
};
852+
}])
853+
854+
.directive('modalAnimationClass', [
855+
'$log', '$modalSuppressWarning',
856+
function ($log, $modalSuppressWarning) {
857+
return {
858+
compile: function(tElement, tAttrs) {
859+
if (!$modalSuppressWarning) {
860+
$log.warn('modal-animation-class is now deprecated. Use uib-modal-animation-class instead.');
861+
}
862+
if (tAttrs.modalAnimation) {
863+
tElement.addClass(tAttrs.modalAnimationClass);
864+
}
865+
}
866+
};
867+
}])
868+
869+
.directive('modalTransclude', [
870+
'$log', '$modalSuppressWarning',
871+
function ($log, $modalSuppressWarning) {
872+
return {
873+
link: function($scope, $element, $attrs, controller, $transclude) {
874+
if (!$modalSuppressWarning) {
875+
$log.warn('modal-transclude is now deprecated. Use uib-modal-transclude instead.');
876+
}
877+
$transclude($scope.$parent, function(clone) {
878+
$element.empty();
879+
$element.append(clone);
880+
});
881+
}
882+
};
883+
}])
884+
885+
.service('$modalStack', [
886+
'$animate', '$timeout', '$document', '$compile', '$rootScope',
887+
'$q',
888+
'$injector',
889+
'$$multiMap',
890+
'$$stackedMap',
891+
'$uibModalStack',
892+
'$log',
893+
'$modalSuppressWarning',
894+
function($animate , $timeout , $document , $compile , $rootScope ,
895+
$q,
896+
$injector,
897+
$$multiMap,
898+
$$stackedMap,
899+
$uibModalStack,
900+
$log,
901+
$modalSuppressWarning) {
902+
if (!$modalSuppressWarning) {
903+
$log.warn('$modalStack is now deprecated. Use $uibModalStack instead.');
904+
}
905+
906+
angular.extend(this, $uibModalStack);
907+
}])
908+
909+
.provider('$modal', ['$uibModalProvider', function($uibModalProvider) {
910+
angular.extend(this, $uibModalProvider);
911+
912+
this.$get = ['$injector', '$log', '$modalSuppressWarning',
913+
function ($injector, $log, $modalSuppressWarning) {
914+
if (!$modalSuppressWarning) {
915+
$log.warn('$modal is now deprecated. Use $uibModal instead.');
916+
}
917+
918+
return $injector.invoke($uibModalProvider.$get);
919+
}];
920+
}]);

0 commit comments

Comments
 (0)