Recently, I developed a small demo to demonstrate how to open a modal window in Angular using a directive as the template.
However, I have some doubts about the way I am passing data and functions to the modal.
Here is the code snippet from the opening controller:
$scope.openModal = function($event){
$scope.items = [1,2,3,4,5];
$scope.modalInstance = $modal.open({
template: '<modalwindow></modalwindow>',
scope:$scope,
test:'akex'
});
$scope.modalInstance.result.then(function (selectedItem) {
console.info(selectedItem);
}, function () {
console.info('Modal dismissed at: ' + new Date());
});
And here is the code for the modal directive:
angular.module('angModalApp')
.directive('modalwindow', function () {
return {
templateUrl: 'scripts/directives/modalwindow.tmpl.html',
restrict: 'E',
link: function postLink(scope, element, attrs) {
scope.ok = function () {
scope.modalInstance.close(["a","b","c"]);
};
scope.cancel = function () {
scope.modalInstance.dismiss('cancel');
};
}
};
});
I would like to hear your thoughts on this approach to using modals. Do you think there is a better way to achieve the same result?
Thank you for taking the time to read this.
You can find the source code of the project at: https://github.com/trostik/angular-modal-window-demo