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 custom template for modal window
Browse files Browse the repository at this point in the history
Closes #2057
  • Loading branch information
bekos authored and pkozlowski-opensource committed Apr 19, 2014
1 parent 00829b6 commit 96def3d
Show file tree
Hide file tree
Showing 3 changed files with 22 additions and 6 deletions.
1 change: 1 addition & 0 deletions src/modal/docs/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ The `$modal` service has only one method: `open(options)` where available option
* `backdrop` - controls presence of a backdrop. Allowed values: true (default), false (no backdrop), `'static'` - backdrop is present but modal window is not closed when clicking outside of the modal window.
* `keyboard` - indicates whether the dialog should be closable by hitting the ESC key, defaults to true
* `windowClass` - additional CSS class(es) to be added to a modal window template
* `windowTemplateUrl` - a path to a template overriding modal's window template

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

Expand Down
17 changes: 11 additions & 6 deletions src/modal/modal.js
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,9 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.transition'])
},
replace: true,
transclude: true,
templateUrl: 'template/modal/window.html',
templateUrl: function(tElement, tAttrs) {
return tAttrs.templateUrl || 'template/modal/window.html';
},
link: function (scope, element, attrs) {
element.addClass(attrs.windowClass || '');

Expand Down Expand Up @@ -226,10 +228,12 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.transition'])
}

var angularDomEl = angular.element('<div modal-window></div>');
angularDomEl.attr('window-class', modal.windowClass);
angularDomEl.attr('index', openedWindows.length() - 1);
angularDomEl.attr('animate', 'animate');
angularDomEl.html(modal.content);
angularDomEl.attr({
'template-url': modal.windowTemplateUrl,
'window-class': modal.windowClass,
'index': openedWindows.length() - 1,
'animate': 'animate'
}).html(modal.content);

var modalDomEl = $compile(angularDomEl)(modal.scope);
openedWindows.top().value.modalDomEl = modalDomEl;
Expand Down Expand Up @@ -353,7 +357,8 @@ angular.module('ui.bootstrap.modal', ['ui.bootstrap.transition'])
content: tplAndVars[0],
backdrop: modalOptions.backdrop,
keyboard: modalOptions.keyboard,
windowClass: modalOptions.windowClass
windowClass: modalOptions.windowClass,
windowTemplateUrl: modalOptions.windowTemplateUrl
});

}, function resolveError(reason) {
Expand Down
10 changes: 10 additions & 0 deletions src/modal/test/modalWindow.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,14 @@ describe('modal window', function () {
expect(windowEl).toHaveClass('test');
expect(windowEl).toHaveClass('foo');
});

it('should support custom template url', inject(function($templateCache) {
$templateCache.put('window.html', '<div class="mywindow" ng-transclude></div>');

var windowEl = $compile('<div modal-window template-url="window.html" window-class="test">content</div>')($rootScope);
$rootScope.$digest();

expect(windowEl).toHaveClass('mywindow');
expect(windowEl).toHaveClass('test');
}));
});

0 comments on commit 96def3d

Please sign in to comment.