I am attempting to open a modal, when clicking the edit button on an Angular UI Grid. I am new to Angular and still learning. I have done some searching but still cannot work out how to inject my modal instance into the StaffController, so it can be used. Will really appreciate any advice / help on this. Thanks,
I am using the angular modal example off: https://angular-ui.github.io/bootstrap/
Index File(Contains the Grid and example Modal Buttons):
#*Staff Grid*#
<body ng-app="Application">
<div ng-controller="ApiStaffController">
<div class="table-responsive angular-grid" ui-grid="gridOptions" ui-
grid-move-columns ui-grid-resize-columns ui-grid-exporter ui-grid-selection>
</div>
</div>
<div ng-controller="ModalDemoCtrl as $ctrl" class="modal-demo">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title" id="modal-title">Create User</h3>
</div>
<div class="modal-body" id="modal-body">
<label asp-for="Person.Forename" class="control-label"></label>
<input type="text" class="form-control" ng-model="$ctrl.newUser.Forename" />
<label asp-for="Person.Surname" class="control-label"></label>
<input type="text" class="form-control" ng-model="$ctrl.newUser.Surname" />
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="$ctrl.ok()" ng-disabled="!$ctrl.newUser.Forename || !$ctrl.newUser.Surname">OK</button>
<button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button>
</div>
</script>
<script type="text/ng-template" id="stackedModal.html">
<div class="modal-header">
<h3 class="modal-title" id="modal-title-{{name}}">The {{name}} modal!</h3>
</div>
<div class="modal-body" id="modal-body-{{name}}">
Having multiple modals open at once is probably bad UX but it's technically possible.
</div>
</script>
<button type="button" class="btn btn-default" ng-click="$ctrl.open()">Open me!</button>
<button type="button" class="btn btn-default" ng-click="$ctrl.open('lg')">Large modal</button>
<button type="button" class="btn btn-default" ng-click="$ctrl.open('sm')">Small modal</button>
<button type="button" class="btn btn-default" ng-click="$ctrl.open('sm', '.modal-parent')">
Modal appended to a custom parent
</button>
<button type="button" class="btn btn-default" ng-click="$ctrl.toggleAnimation()">Toggle Animation ({{ $ctrl.animationsEnabled }})</button>
<button type="button" class="btn btn-default" ng-click="$ctrl.openComponentModal()">Open a component modal!</button>
<button type="button" class="btn btn-default" ng-click="$ctrl.openMultipleModals()">
Open multiple modals at once
</button>
<div ng-show="$ctrl.selected">Selection from a modal: {{ $ctrl.selected }}</div>
<div class="modal-parent">
</div>
</div>
I have a file named: ModalController that contains the below: (This is from the example)
angular.module('Application').controller('ModalDemoCtrl', function
($uibModal, $log, $document) {
var $ctrl = this;
$ctrl.items = ['item1', 'item2', 'item3'];
$ctrl.animationsEnabled = true;
$ctrl.open = function (size, parentSelector) {
var parentElem = parentSelector ?
angular.element($document[0].querySelector('.modal-demo ' +
parentSelector)) : undefined;
var modalInstance = $uibModal.open({
animation: $ctrl.animationsEnabled,
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
controllerAs: '$ctrl',
size: size,
appendTo: parentElem,
resolve: {
items: function () {
return $ctrl.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$ctrl.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
$ctrl.openComponentModal = function () {
var modalInstance = $uibModal.open({
animation: $ctrl.animationsEnabled,
component: 'modalComponent',
resolve: {
items: function () {
return $ctrl.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$ctrl.selected = selectedItem;
}, function () {
$log.info('modal-component dismissed at: ' + new Date());
});
};
$ctrl.openMultipleModals = function () {
$uibModal.open({
animation: $ctrl.animationsEnabled,
ariaLabelledBy: 'modal-title-bottom',
ariaDescribedBy: 'modal-body-bottom',
templateUrl: 'stackedModal.html',
size: 'sm',
controller: function ($scope) {
$scope.name = 'bottom';
}
});
$uibModal.open({
animation: $ctrl.animationsEnabled,
ariaLabelledBy: 'modal-title-top',
ariaDescribedBy: 'modal-body-top',
templateUrl: 'stackedModal.html',
size: 'sm',
controller: function ($scope) {
$scope.name = 'top';
}
});
};
$ctrl.toggleAnimation = function () {
$ctrl.animationsEnabled = !$ctrl.animationsEnabled;
};
});
// Please note that $uibModalInstance represents a modal window (instance) dependency.
// It is not the same as the $uibModal service used above.
angular.module('Application').controller('ModalInstanceCtrl', function
($uibModalInstance, StaffService, items) {
var $ctrl = this;
$ctrl.items = items;
$ctrl.selected = {
item: $ctrl.items[0]
};
$ctrl.ok = function () {
alert($ctrl.newUser.Forename);
alert($ctrl.newUser.Surname);
//$uibModalInstance.close($ctrl.selected.item); //Untill we do the saving staff
};
$ctrl.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
// Please note that the close and dismiss bindings are from $uibModalInstance.
angular.module('Application').component('modalComponent', {
templateUrl: 'myModalContent.html',
bindings: {
resolve: '<',
close: '&',
dismiss: '&'
},
controller: function () {
var $ctrl = this;
$ctrl.$onInit = function () {
$ctrl.items = $ctrl.resolve.items;
$ctrl.selected = {
item: $ctrl.items[0]
};
};
$ctrl.ok = function () {
$ctrl.close({ $value: $ctrl.selected.item });
};
$ctrl.cancel = function () {
$ctrl.dismiss({ $value: 'cancel' });
};
}
});`
I have a staff controller here that returns data from an API call, to populate the UI grid.`
var editButtonTemplate = '<div class="ui-grid-cell-contents"><button type=
"button" class="btn btn-xs btn-primary" ng-
click="grid.appScope.vm.editRow(grid, row)" <i class="fa fa-edit"></i>
</button></div>'
/*Staff Grid*/
app.controller('ApiStaffController', function ($scope, StaffService) {
$scope.gridOptions = {
data: 'Data',
enableFiltering: true,
showGroupPanel: true,
enableGridMenu: true,
resizable: true,
enableColumnResizing: true,
enableRowSelection: true,
enableRowHeaderSelection: false,
showGridFooter: true,
noUnselect: true,
multiSelect: false,
modifierKeysToMultiSelect: false,
noUnselect: true,
columnDefs: [{ field: 'person.forename', displayName: 'Forename' },
{ field: 'person.surname', displayName: 'Surname' },
{ field: 'person.dateofbirth', displayName: 'DOB' },
{ field: 'employmentStartDate', displayName: 'Employment Start Date' },
{ field: 'employmentEndDate', displayName: 'Employment End Date' },
{ name: 'edit', displayName: 'Edit', cellTemplate: editButtonTemplate },
{ name: 'delete', displayName: 'Delete', cellTemplate: '<button id="deleteBtn" type="button" class="btn-xs btn-danger fa fa-1x fa-trash-o" ng-click="$parent.$parent.deleteTeam(row.entity)"></button> ' }]
};
/*Gets all the staff records using the service*/
GetAllStaff();
function GetAllStaff() {
var promiseGet = StaffService.getAllStaff();
promiseGet.then(function (pl) { $scope.Staff = pl.data, $scope.Data = pl.data },
function (errorPl) {
$log.error('Error Getting Records.', errorPl);
});
}
});
I managed to resolve this by injecting: $uibModal into the staff controller like below:
app.controller('ApiStaffController', function ($scope, StaffService, $uibModal)
Then testing it by displaying the modal like this:
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
scope: $scope, //passed current scope to the modal
size: 'lg'
});
If there is a better / more flexible way of doing this I appreciate all feedback, thanks.
Related
If I use a select tag (dropdown) in my ui-bootstrap modal body then it doesn't show modal-footer buttons. It's working fine if I use input element instead of select tag.
I have tried all the things and couldn't resolve this. May be there is something which is missing.
var app = angular.module('myApp', ['ngAnimate','ui.bootstrap']);
app.controller('shell', function($scope, $interval, $uibModal) {
$scope.test = 'hello world';
this.counter = 0;
var vm = this;
this.moveHandler = function() {
console.log('mouse moved, reset counter!');
vm.counter = 0;
};
var timer = function(iterCount) {
console.log('timer tick', vm.counter);
vm.counter++;
};
var intervalPromise = $interval(timer, 100);
$scope.$on("$destroy", function handler() {
// destruction code here
$interval.cancel(intervalPromise); // stop interval on destroy of ctrl.
});
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
};
});
// modal code from angular-ui-bootstrap demo
app.controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
app.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$uibModalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
html, body {
width: 100%;
height: 100%;
}
/*
.modal {
display: block;
}*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.0/ui-bootstrap-tpls.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<!-- <input type="text" class="form-control"/> -->
<select class="form-control"/>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<button class="btn btn-default" ng-click="open()">Open me!</button>
<button class="btn btn-default" ng-click="open('lg')">Large modal</button>
<button class="btn btn-default" ng-click="open('sm')">Small modal</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
{{test}}
</div>
enter image description here
Hi u have to close the select tag instead inline closing you have to close like that
Wrong
<select class="form-control"/>
Right
select class="form-control" ></select>
for reference https://plnkr.co/edit/E8Ztel80jhKCaZYIqpex
and checknow your Modal footer Appears
View calling modal
I have this code you should: open a modal bringing the data within the controller being used by the angular-ui-bootstrap. But it is not getting the result of the "item" that is selected.
in my controller:
function EntidadesCtrlFn(EntidadeService, $uibModal, $log) {
var vm = this;
vm.animationsEnabled = true;
vm.modalEdit = function(size, selectedEntidade) {
var modalInstance = $uibModal.open({
animation: vm.animationsEnabled,
templateUrl: './app/modulos/entidades/views/edit-entidades.html',
controller: function($scope, $uibModalInstance, entidade) {
vm.entidade = entidade;
},
controllerAs: 'vm',
bindToController: true,
size: size,
resolve: {
entidade: function() {
return selectedEntidade;
}
}
});
modalInstance.result.then(function(selectedItem) {
vm.selected = selectedItem;
}, function() {
console.log('Modal dismissed.result.');
$log.info('Modal dismissed at: ' + new Date());
});
};
in view of list:
<div class="row" ng-controller="EntidadesCtrl as vm">
...
<button class="btn btn-default" ng-click="vm.modalEdit('lg', entidade)" type="button">
Editar
</button>
...
This modal opens, but does not bring the contents of:
controller: function($scope, $uibModalInstance, entidade) {
vm.entidade = entidade;
},
TemplateUrl:
<section ng-controller="EntidadesCtrl as vm">
{{vm}}
<div class="modal-header">
<h3 class="modal-title">Editando entidade</h3>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()" type="button">OK</button>
<button class="btn btn-warning" ng-click="cancel()" type="button">Cancel</button>
</div>
</section>
Solved.
I ended up forgetting to pass "this" in the controller ;
Sorry about that.
In the controller modal:
controller: function($uibModalInstance, entidade) {
var vm = this;
vm.entidade = entidade;
},
I need help closing a modal. The modal is using ui-bootstrap plugin. I see in the documentation (http://angular-ui.github.io/bootstrap/) that they used two controllers for the modal. I would like to be able to close the modal with one controller.
Here is my modal template:
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">{{modalTitle}}</h4>
</div>
<div class="modal-body">
<drilldown table-data="drilldownData"></drilldown>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-right" data-dismiss="modal">Close</button>
</div>
And here is the controller that the modal is used on:
var ChartController = function($rootScope, $scope, $modal) {
$scope.openModal = function (plotData) {
var unixtime_to_date = new Date(plotData); //convert from milliseconds to seconds
var modalInstance = $modal.open({
size: 'lg',
controller: function($scope) {
$scope.modalTitle = "Drilldown Chart";
$scope.modalBody = plotData;
$scope.drilldownData = {
daycount: $rootScope.diffDays,
dashboardreportid: 1,
companyid: $rootScope.companyid,
companybrandid: $rootScope.brandid,
startdate: unixtime_to_date,
enddate: unixtime_to_date,
clientdb: $rootScope.clientdb,
calltype: "Secondary"
}
},
templateUrl: 'modals/chartModal.html'
});
};
};
I'm very confused on how to close the modal when clicking the close button or 'x' button. Thanks for the help!
In modalInstance controller add function cancel
var ChartController = function($rootScope, $scope, $modal) {
$scope.openModal = function (plotData) {
var unixtime_to_date = new Date(plotData); //convert from milliseconds to seconds
var modalInstance = $modal.open({
size: 'lg',
controller: function($scope) {
//function to close modal
$scope.cancel = function() {
modalInstance.dismiss('cancel');
};
$scope.modalTitle = "Drilldown Chart";
$scope.modalBody = plotData;
$scope.drilldownData = {
daycount: $rootScope.diffDays,
dashboardreportid: 1,
companyid: $rootScope.companyid,
companybrandid: $rootScope.brandid,
startdate: unixtime_to_date,
enddate: unixtime_to_date,
clientdb: $rootScope.clientdb,
calltype: "Secondary"
}
},
templateUrl: 'modals/chartModal.html'
});
};
};
HTML
Add ng-click="cancel()" to button type="button"...
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
ng-click="cancel()" aria-hidden="true">×</button>
<h4 class="modal-title">{{modalTitle}}</h4>
</div>
<div class="modal-body">
<drilldown table-data="drilldownData"></drilldown>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-right" data-dismiss="modal">Close</button>
</div>
add this on your controller
var ChartController = function($rootScope, $scope, $modal,$modalInstance) {
$scope.openModal = function (plotData) {
var unixtime_to_date = new Date(plotData); //convert from milliseconds to seconds
var modalInstance = $modal.open({
size: 'lg',
controller: function($scope) {
$scope.modalTitle = "Drilldown Chart";
$scope.modalBody = plotData;
$scope.drilldownData = {
daycount: $rootScope.diffDays,
dashboardreportid: 1,
companyid: $rootScope.companyid,
companybrandid: $rootScope.brandid,
startdate: unixtime_to_date,
enddate: unixtime_to_date,
clientdb: $rootScope.clientdb,
calltype: "Secondary"
}
},
templateUrl: 'modals/chartModal.html'
});
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
and view will be like this
<button type="button" class="btn btn-default pull-right" ng-click="cancel()" data-ismiss="modal">Close</button>
I hope it should work
ng-click="$dismiss()" is all you need and close button markup can be as below
<button ng-click="$dismiss()" type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
I'm using Angular-ui modal instance and i'm trying to get the return value but for some reason the bindings is not working correctly
var openNewAlbum = function() {
var modal = $modal.open({
templateUrl :'/app/modals/NewAlbumModal.html',
controller : function($scope, $modalInstance) {
$scope.albumTitle;
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
$scope.accept = function() {
$modalInstance.close($scope.albumTitle);
}
},
keyboard: false,
backdrop: 'static'
});
return modal;
}
this is in the controller:
$scope.newAlbum = function() {
var modalInstance = ModalService.openNewAlbum();
modalInstance.result.then(function(response) {
console.log(response);
});
}
the var response that gets logged is Whatever I assign to it inside the Modal's Controller and not what gets passed in the in Input
here is the modal template:
<div style="padding:6px">
<div class="modal-body" style="font-weigth:bold;font-size:18px">
<label for="">Nombre del Album</label>
<input class="form-control" type="text" ng-model="albumTitle">
{{albumTitle}}
<br>
</div>
<button class="btn btn-danger" ng-click="cancel()" >Cancelar</button>
<button class="btn btn-primary pull-right" ng-click="accept()">Aceptar</button>
</div>
when checking {{albumTitle}} I cant see that it changes, but when I click Accept, the return value is ' ' ....... (the value that was assign to $scope.albumTitle = '';)
I'm new with AngularJS. I'm trying to implement a reusable modal Bootstrap.
This is the index.html:
<div ng-controller="mymodalcontroller">
<modal lolo="modal1" modal-body='body' modal-footer='footer' modal-header='header' data-ng-click="myRightButton()"></modal>
Launch Demo Modal
</div>
This is the module, controller and directive:
var myModal = angular.module('myModal', []);
myModal.controller('mymodalcontroller', function ($scope) {
$scope.header = 'Put here your header';
$scope.body = 'Put here your body';
$scope.footer = 'Put here your footer';
$scope.myRightButton = function (bool) {
alert('!!! first function call!');
};
});
myModal.directive('modal', function () {
return {
restrict: 'EA',
scope: {
title: '=modalTitle',
header: '=modalHeader',
body: '=modalBody',
footer: '=modalFooter',
callbackbuttonleft: '&ngClickLeftButton',
callbackbuttonright: '&ngClick',
handler: '=lolo'
},
templateUrl: 'partialmodal.html',
transclude: true,
controller: function ($scope) {
$scope.handler = 'pop';
},
};
});
And this is the html template:
<div id="{{handler}}" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">{{header}}</h4>
</div>
<div class="modal-body">
<p class="text-warning">{{body}}</p>
</div>
<div class="modal-footer">
<p class="text-left">{{footer}}</p>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-ng-click="callbackbuttonright(), $event.stopPropagation()">Save changes</button>
</div>
</div>
</div>
</div>
I want the 'Launch Alert' button (in the modal) executes the alert and it does it well. The problem is that it is launched when clicking the 'Cancel' button in the Modal and when the window closes. Any ideas?
Here is the working code:CodeThank you.
I would suggest you not bind to ng-click. It does some other magic stuff that can screw with things. There is also a syntax error in your partial.
I've fixed those issues in my fork here:
http://plnkr.co/edit/2jK2GFcKSiKgMQMynD1R?p=preview
To summarize:
script.js:
Change your callbackbuttonright binding from ngClick to ngClickRightButton
myModal.directive('modal', function () {
return {
restrict: 'EA',
scope: {
title: '=modalTitle',
header: '=modalHeader',
body: '=modalBody',
footer: '=modalFooter',
callbackbuttonleft: '&ngClickLeftButton',
callbackbuttonright: '&ngClickRightButton',
handler: '=lolo'
},
templateUrl: 'partialmodal.html',
transclude: true,
controller: function ($scope) {
$scope.handler = 'pop';
},
};
});
index.html:
Change data-ng-click to data-ng-click-right-button
<modal lolo="modal1" modal-body="body" modal-footer="footer" modal-header="header" data-ng-click-right-button="myRightButton()"></modal>
Another minor issue:
partialmodal.html:
Change , to ;
<button type="button" class="btn btn-primary" data-ng-click="callbackbuttonright(); $event.stopPropagation()">Launch Alert</button>
If anyone is still interested, here is a example I recently worked on with bootstrap modal and angularjs directive.
HTML:
<modal visible="showModal1" on-sown="modalOneShown()" on-hide="modalOneHide()">
<modal-header title="Modal Titel 1"></modal-header>
<modal-body>
<h3>This is modal body</h3>
</modal-body>
<modal-footer>
<button class="btn btn-primary" ng-click="hide(1)">Save</button>
</modal-footer>
</modal>
JavaScript:
var myModalApp = angular.module('myModalApp',[]);
myModalApp.directive('modal', function(){
return {
template: '<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"><div class="modal-dialog modal-sm"><div class="modal-content" ng-transclude><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4 class="modal-title" id="myModalLabel">Modal title</h4></div></div></div></div>',
restrict: 'E',
transclude: true,
replace:true,
scope:{visible:'=', onSown:'&', onHide:'&'},
link:function postLink(scope, element, attrs){
$(element).modal({
show: false,
keyboard: attrs.keyboard,
backdrop: attrs.backdrop
});
scope.$watch(function(){return scope.visible;}, function(value){
if(value == true){
$(element).modal('show');
}else{
$(element).modal('hide');
}
});
$(element).on('shown.bs.modal', function(){
scope.$apply(function(){
scope.$parent[attrs.visible] = true;
});
});
$(element).on('shown.bs.modal', function(){
scope.$apply(function(){
scope.onSown({});
});
});
$(element).on('hidden.bs.modal', function(){
scope.$apply(function(){
scope.$parent[attrs.visible] = false;
});
});
$(element).on('hidden.bs.modal', function(){
scope.$apply(function(){
scope.onHide({});
});
});
}
};
}
);
myModalApp.directive('modalHeader', function(){
return {
template:'<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4 class="modal-title">{{title}}</h4></div>',
replace:true,
restrict: 'E',
scope: {title:'#'}
};
});
myModalApp.directive('modalBody', function(){
return {
template:'<div class="modal-body" ng-transclude></div>',
replace:true,
restrict: 'E',
transclude: true
};
});
myModalApp.directive('modalFooter', function(){
return {
template:'<div class="modal-footer" ng-transclude></div>',
replace:true,
restrict: 'E',
transclude: true
};
});
function ModalController($scope){
$scope.title = "Angularjs Bootstrap Modal Directive Example";
$scope.showModal1 = false;
$scope.showModal2 = false;
$scope.hide = function(m){
if(m === 1){
$scope.showModal1 = false;
}else{
$scope.showModal2 = false;
}
}
$scope.modalOneShown = function(){
console.log('model one shown');
}
$scope.modalOneHide = function(){
console.log('model one hidden');
}
}
Compared to other options, below given the minimalist approach using Angular Bootstrap and an angular factory. See a sample snippet below.
Reusable modal view - ConfirmationBox.html
<div class="modal-header">
<h3 class="modal-title">{{title}}</h3>
</div>
<div class="modal-body">
{{message}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-warn" data-ng-click="ok(); $event.stopPropagation()">OK</button>
<button type="button" class="btn btn-default" data-ng-click="cancel(); $event.stopPropagation()">Cancel</button>
</div>
Reusable module and shared factory, for handling the reusable modal dialog
angular.module('sharedmodule',['ui.bootstrap', 'ui.bootstrap.tpls'])
.factory("sharedService",["$q", "$modal", function ($q, $modal)
{
var _showConfirmDialog = function (title, message)
{
var defer = $q.defer();
var modalInstance = $modal.open({
animation: true,
size: "sm",
templateUrl: 'ConfirmationBox.html',
controller: function ($scope, $modalInstance)
{
$scope.title = title;
$scope.message = message;
$scope.ok = function ()
{
modalInstance.close();
defer.resolve();
};
$scope.cancel = function ()
{
$modalInstance.dismiss();
defer.reject();
};
}
});
return defer.promise;
}
return {
showConfirmDialog: _showConfirmDialog
};
}]);
Portion of your View, using the shared modal dialog
<a data-ng-click="showConfirm()">Go Back to previous page</a>
Controller of your view, opening your shared reusable modal dialog and handling notifications (Ok and Cancel)
var myModule = angular.module("mymodule", ['sharedmodule', 'ui.bootstrap', 'ui.bootstrap.tpls']);
myModule.controller('myController', ["$scope", "sharedService", "$window",
function ($scope, sharedService, $window)
{
$scope.showConfirm = function ()
{
sharedService.showConfirmDialog(
'Confirm!',
'Any unsaved edit will be discarded. Are you sure to navigate back?')
.then(function ()
{
$window.location = '#/';
},
function ()
{
});
};
}]);