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;
},
Related
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.
I was looking for this question on forum and the solution dosn't worked for me, so...
The only way to close the modal is clicking outside of modal, or press ESC on keyboard..
Here is my modal controller:
app.controller('ModalCtrl', function($scope, $uibModal) {
$scope.items = [{}]
$scope.showModal = function(selectedItem) {
var uibModalInstance = $uibModal.open({
windowTopClass: 'modal fade ql-modal',
templateUrl : 'modalContent.html',
controller : function($scope, $uibModalInstance, $uibModal, item){
$scope.item = item;
},
resolve: {
item: function(){
return selectedItem;
}
} // empty storage
});
uibModalInstance.result.then(function(selectedItem){
$scope.selected = selectedItem;
$scope.cancel = function(){
$uibModalInstance.dismiss('cancel');
};
});
};
});
And here is my modal on HTML:
<script type="text/ng-template" id="modalContent.html">
<!-- Modal -->
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="MyModal" aria-label="Close" ng-click="cancel()">
<span aria-hidden="true">×</span>
</button>
...................................
<div class="modal-footer">
<button type="button" class="btn btn-primary" ng-click="cancel()">Close</button>
</div>
</div>
<!--/.Content-->
<!--/Modal-->
</script>
I followed every answer, fiddle, plnkr, but i cannot make it work.
Just move a cancel() method from uibModalInstance.result.then to
your modal controller:
var uibModalInstance = $uibModal.open({
windowTopClass: 'modal fade ql-modal',
templateUrl : 'modalContent.html',
controller : function($scope, $uibModalInstance, $uibModal, item){
$scope.item = item;
$scope.cancel = function(){
$uibModalInstance.dismiss('cancel');
};
},
resolve: {
item: function(){
return selectedItem;
}
} // empty storage
});
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
I am new to Angular and trying to implement a modal. Having problem closing/dismissing the modal - when I click the cancel button, nothing happens.
Here is the controller code:
angular.module('navApp')
// Passing the $modal to controller as dependency
.controller('HomeCtrl', ['$scope', '$uibModal', function ($scope, $uibModal) {
$scope.title = "Hello, Angm-Generator!";
$scope.open = function () {
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalCtrl'
});
};
}])
.controller('ModalCtrl', function ($scope, $uibModalInstance) {
// Added some content to Modal using $scope
$scope.content = "ModalCtrl, Yeah!"
// Add cancel button
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
})
and here is the template view of the actual modal
<!-- Modal Script -->
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<button type="button" class="close" datadismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title">Hello from Modal!</h3>
</div>
<div class="modal-body">
Modal Content from: <b>{{ content }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-danger" ngclick="cancel()">Cancel</button>
</div>
</script>
Even clicking the cross on the top right of modal doesn't close the modal. Any ideas? Thanks:)
Should it not be ng-click="cancel()" instead of ngclick?
Also I don't think the scope is bound to the controller, I haven't tested this but I believe you need some more options:
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalCtrl',
controllerAs: '$mCtrl',
bindToController: true
});
And then just update your template:
ng-click="$mCtrl.cancel()"
Have you tried $uibModalInstance.close()?
Another thing you can do is
$scope.open = function () {
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalCtrl'
});
modalInstance.result.then(function successCallBack() {
modalInstance.close()
}, function errorCallBack() {
modalInstance.close()
})
};`
If you want to close the model , on click of the cross bar then , you can use
<button type="button" class="close" data-dismiss="modal">×</button>
This will be button , and data-dismiss="modal" will close your modal.
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 ()
{
});
};
}]);