Related
Noob alert!
The question here is exactly the one that I have: angularjs - Accessing ui-bootstrap modal dismiss and close function from another controller
However, I don't understand the answer that was chosen as correct! I understand the words but don't understand how to share the controller.
I have an app controller that opens a modal, and within the modal's template, I have a directive. I would like to be able manipulate the modal instance from within the directive's controller.
Here's my markup:
<script type="text/ng-template" id="settingsModal">
<div class="modal-header">
<h3 class="modal-title">Confirm update!</h3>
</div>
<div class="modal-body">
<calendar-settings cid="calendarId"/>
</div>
<div class="modal-footer">
<!-- I want these buttons inside the directive instead -->
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
In the body of the modal, I am calling the calendarSettings directive, and I'd like to be able to use the .dismiss and .close methods of the modal instance from within my directive.
Here's what the open method looks like:
var modalInstance = $modal.open({
templateUrl: 'settingsModal',
controller: 'ModalInstanceController',
resolve: {
item: function() {
return $scope.sEntry;
},
cid: function() {
return id;
}
},
reject: {
item: function() {
return $scope.sEntry;
},
cid: function() { return null; }
}
});
And here's the ModalInstanceController:
calendarsApp.controller('ModalInstanceController', function($scope, $modalInstance, item, cid){
$scope.item = item;
$scope.calendarId = cid;
console.log(item);
$scope.ok = function () {
$modalInstance.close($scope.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
I think what I want to do is easy, but I'm not sure how to expose the modal instance controller to the directive, or if there is a different approach I should be thinking about.
NOTE: I didn't paste the code from the directive in here. But I'm trying to access the close and dismiss methods of the modal instance from within my directive's controller.
Thanks for any help!
So
var modalInstance = $modal.open({
templateUrl: 'settingsModal',
controller: 'ModalInstanceController',
resolve: {
item: function() {
return $scope.sEntry;
},
cid: function() {
return id;
}
},
reject: {
item: function() {
return $scope.sEntry;
},
cid: function() { return null; }
}
//This comes from ModalInstanceController result is
//equivalent to whatever u send back
}).result.then(function(result){
console.log(result); //Press f12 on chrome and go to console.
});
calendarsApp.controller('ModalInstanceController', function($scope, $modalInstance, item, cid){
$scope.item = item;
$scope.calendarId = cid;
console.log(item);
$scope.ok = function () {
//You are sending back $scope.item but if you want everything
//send back the $scope which is equivalent to sending back //ModalInstanceController
// $modalInstance.close($scope.item);
$modalInstance.close($scope);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
I created a custom directive to display a ui.bootstrap modal and I cannot populate the dialog with the values I want. I don't understand why is it not working. I checked other questions and posts but I could not find and example suitable for my case.
I've created a plunker with a similar version of my real code to show the problem.
In the example, I am using a button to launch the modal but in my application I am doing it by code when some conditions are satisfied.
This is the link http://plnkr.co/edit/7CCV7uHHj7SrWbsp1PRJ
Basically I have a directive:
var app = angular.module('app', ['ui.bootstrap']);
app.directive('revModal', function() {
return {
restrict: 'E',
transclude: true,
replace: true,
scope: {
id: "#",
title: "#",
size: "#",
bodyMessage: '#',
acceptButton: '#',
dismissButton: '#'
},
controller: function($scope, $modal) {
$scope.title = $scope.title ? $scope.title : "Alert";
$scope.size = $scope.size ? $scope.size : "sm";
$scope.acceptButton = $scope.acceptButton ? $scope.acceptButton : "OK";
$scope.dismissButton = $scope.dismissButton ? $scope.dismissButton : "Cancel";
$scope.openModal = function() {
var modalInstance = $modal.open({
templateUrl: 'modalAlert.html',
animation: true,
backdrop: true,
windowClass: 'app-modal-window',
size: $scope.size,
resolve: {
acceptButton: $scope.acceptButton,
dismissButton: $scope.dismissButton
}
});
modalInstance.result.then(function() {}, function() {
console.log('Modal dismissed at: ' + new Date());
});
};
},
link: function($scope, element) {
element[0].open = function() {
return $scope.openModal();
}
}
}
});
In the directive I've also tried to resolve the values using function but it didn't work either.
resolve:{
dismissButton: function(){return $scope.dismissButton}
...
}
The directive template is the following, and my problem is that the values inside curly braces are not replaced. The logic to link the ng-click functions was not done yet.
<div class="modal-header">
<h3 class="modal-title">{{title}}</h3>
</div>
<div class="modal-body">
{{bodyMessage}}
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="acceptModal()">{{acceptButton}}</button>
<button class="btn btn-warning" ng-click="dismissModal()">{{dismissButton}}</button>
</div>
To use this directive I just insert the following tag in the html:
<div ng-controller="TimeRangeModalController">
<rev-modal id="timeRangeModal" title="test" accept-button="acepto" dismiss-button="calcelo" body-message="cuerpo"></rev-modal>
</div>
The controller to open the modal is:
var app = angular.module('app');
app.controller('TimeRangeModalController', function($scope, $document) {
$scope.open= function(modalId){
if (undefined !== modalId) {
var modal = $document[0].getElementById(modalId);
if (null !== modal) {
modal.open();
} else {
console.error('DOM element with id ' + 'modalId' + 'does not exist');
}
}
}
});
Any suggestion on how should I resolve the values to populate the modal?
Thanks and regards, Daniela.
Finally I've discovered the issue, I was missing to set the scope in the modalInstance.
The final open modal function will be:
$scope.openModal = function() {
var modalInstance = $modal.open({
templateUrl: 'modalAlert.html',
animation: true,
backdrop: true,
windowClass: 'app-modal-window',
size: $scope.size,
scope:$scope
});
Note also that the resolve clause is not need it.
I've updated the Plunkr http://plnkr.co/edit/7CCV7uHHj7SrWbsp1PRJ
Bootstrap 3 provides Bootstrap: event messages: success, info, warning, danger.
However sometimes the view doesn't have enough space to show up the event message.
Is there easy way to wrap event with modal in Angular?
This is a template I started to play with
I'll answer on my own question.
Simple way
The flow is pretty simple and straightforward. We don't reinvent the wheel here.
We don't need nor header neither footer:
Dialog template HTML:
<div class="modal-body" style="padding:0px">
<div class="alert alert-{{data.mode}}" style="margin-bottom:0px">
<button type="button" class="close" data-ng-click="close()" >
<span class="glyphicon glyphicon-remove-circle"></span>
</button>
<strong>{{data.boldTextTitle}}</strong> {{data.textAlert}}
</div>
</div>
We even don't need to use ng-class:
class="alert-{{data.mode}}"
where mode might be: success, info, warning, danger
Modal Instance Controller:
var ModalInstanceCtrl = function ($scope, $modalInstance, data) {
$scope.data = data;
$scope.close = function(/*result*/){
$modalInstance.close($scope.data);
};
};
And this is modal configuration and content:
$scope.data = {
boldTextTitle: "Done",
textAlert : "Some content",
mode : 'info'
}
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
backdrop: true,
keyboard: true,
backdropClick: true,
size: 'lg',
resolve: {
data: function () {
return $scope.data;
}
}
});
Demo Plunker
Directive way
Demo 2 Plunker
We can put all above written code into directive for better maintenance:
HTML
<button class="btn btn-success" ng-click="open()" >success
<my-alert
bold-text-title="Done"
text-alert="Some content"
mode="success"
></my-alert>
</button>
Directive
.directive('myAlert', function($modal,$log) {
return {
restrict: 'E',
scope: {
mode: '#',
boldTextTitle: '#',
textAlert : '#'
},
link: function(scope, elm, attrs) {
scope.data= {
mode:scope.mode,
boldTextTitle:scope.boldTextTitle,
textAlert:scope.textAlert
}
var ModalInstanceCtrl = function ($scope, $modalInstance, data) {
console.log(data);
scope.data= {
mode:scope.mode || 'info',
boldTextTitle:scope.boldTextTitle || 'title',
textAlert:scope.textAlert || 'text'
}
};
elm.parent().bind("click", function(e){
scope.open();
});
scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
backdrop: true,
keyboard: true,
backdropClick: true,
size: 'lg',
resolve: {
data: function () {
return scope.data;
}
}
});
modalInstance.result.then(function (selectedItem) {
scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
}
}
};
})
Hope it will save time to someone.
I've made a service and controller which depends of eachother:
.service('AlertService', function($uibModal){
/*
headerText - presents text in header
bodyText - presents text in body
buttonText - presents text in button. On its click if method parameters is not passed, modal will be closed.
In situation that the method parameters is passed, on its click, method will be called. For situations
like that, there is parameter buttonText2 which will be used as cancel modal functionality.
method - presents passed function which will be called on confirmation
buttonText2 - presents text in button for cancel
*/
var alert = function(headerText, bodyText, buttonText, method, buttonText2){
method = method || function(){};
buttonText2 = buttonText2 || '';
$uibModal.open({
animation: true,
templateUrl: '/static/angular_templates/alert-modal.html',
controller: 'AlertModalInstanceCtrl',
size: 'md',
resolve: {
headerText: function () {
return headerText;
},
bodyText: function () {
return bodyText;
},
buttonText: function () {
return buttonText;
},
method: function () {
return method;
},
buttonText2: function () {
return buttonText2;
}
}
});
};
return{
alert: alert
};
})
.controller('AlertModalInstanceCtrl', function ($scope, $uibModalInstance, headerText, bodyText, buttonText, method, buttonText2) {
$scope.headerText = headerText;
$scope.bodyText = bodyText;
$scope.buttonText = buttonText;
$scope.method = method;
$scope.buttonText2 = buttonText2;
$scope.ok = function () {
$scope.method();
$uibModalInstance.dismiss('cancel');
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
and html file:
<!--Modal used for alerts in AlertService-->
<div class="modal-header">
<h3 class="modal-title">{[{ headerText }]}</h3>
</div>
<div class="modal-body">
<p>{[{ bodyText }]}</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" ng-click="cancel()" ng-if="buttonText2">{[{ buttonText2 }]}</button>
<button class="btn btn-primary" ng-click="ok()">{[{ buttonText }]}</button>
</div>
Now, depending for what type you want to use it, you have a few options:
-If you pass headerText, bodyText and buttonText, it will behave like a classic alert modal
AlertService.alert('Some header', 'Some message', 'Text button');
-If you pass headerText, bodyText, buttonText and method, it will behave like a classic alert modal but with the function which you can pass and later handle in the controller
AlertService.alert('Are you sure?', 'Are you sure you want to create this round', 'Ok', $scope.createRound);
$scope.createRound = function(){
//do something
}
-And the last one. If you pass all the parameters, it will act like the previous one, just with the possibility to cancel and close modal.
AlertService.alert('Are you sure?', 'Are you sure you want to create this round', 'Ok', $scope.createRound, 'Cancel');
$scope.createRound = function(){
//do something
}
Of course, if you want to use this, you'll have to inject angular ui bootstrap. I wasted a lot of time to develop this, but it worth. It was annoying to create every time a new controller, new template and all the other things.
From the controller then you can easily use it, just inject it first.
Thanks for answering your own question, it was helpful.
Here's a version as a service you can wire in and fire off from any controller without needing to include directive mark-up.
It uses the latest angular UI Bootstrap paradigm for modals.
It has some convenience methods (info, error, warn, success).
It fires off an event when closed with the data as an event argument in case you need to know that.
Enjoy!
angular.module('modal.alert.service', [], function ($provide) {
'use strict';
$provide.factory('ModalAlertService', ['$rootScope', '$uibModal',
function ($rootScope, $uibModal) {
var factory = {
alert: function(mode, title, text) {
var modalData = {
mode : mode,
title : title,
text : text
};
var modalInstance = $uibModal.open({
template: '<div class="modal-body" style="padding:0px">' +
'<div class="alert alert-{{data.mode}}" style="margin-bottom:0px">' +
'<button type="button" class="close" data-ng-click="close()" >' +
'<span class="glyphicon glyphicon-remove-circle"></span>' +
'</button><strong>{{data.title}}</strong>: {{data.text}}</div></div>',
controller : 'ModalAlertController',
backdrop : true,
keyboard : true,
backdropClick : true,
size : 'lg',
resolve : {
data : function() {
return modalData;
}
}
});
modalInstance.result.then(function(data) {
$rootScope.$broadcast('modal-alert-closed', { 'data' : data });
});
},
info: function(title, text) {
factory.alert('info', title, text);
},
error: function(title, text) {
factory.alert('danger', title, text);
},
warn: function(title, text) {
factory.alert('warning', title, text);
},
success: function(title, text) {
factory.alert('success', title, text);
}
};
return factory;
}]);
}).controller('ModalAlertController', function ($scope, $uibModalInstance, data) {
$scope.data = data;
$scope.close = function() {
$uibModalInstance.close($scope.data);
};
});
I'm a newbie angular and will be happy to have some help here.
I'm struggeling to find out why I cannot setup one directive that is setting up an attribute hide="true" or "false" that will be used within the directive (Rank) as a parameter to change the inner directive (label) ng-hide to hide the label.
I tried everything
The outer directive (Rank) html:
<div>
<img src="/Components/Directives/images/blue_{{RankValue}}.svg" tooltip="{{RankValue}}/4" />
<label-info ng-hide="hide" header="{{header}}"></label-info>
</div>
The outer directive (Rank) directive java script:
angular.module('reusableDirectives')
.directive('Rank', function () {
return {
restrict: 'E',
scope: {
hide: '='
},
link: function (scope, element, attrs) {
scope.safeApply(scope.RankValue = scope.$eval(attrs.value));
scope.safeApply(scope.hidelabel = "true");
if (attrs.hidelabel == "false")
scope.safeApply(scope.hidelabel = "false");
scope.hidelabel = attrs.hide;
},
templateUrl: '/Components/Directives/Rank.html'
};
})
.controller('rankCtrl', ['scope', function ($scope) {
}]);
The inner directive (label) Html:
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>{{header}}</h3>
</div>
<div class="modal-body">
<div ng-bind-html="items"></div>
</div>
</div>
<div class="modal-footer">
<div style="float:left;">
<button class="btn btn-primary" ng-click="ok()">Close</button>
</div>
</div>
</script>
<div>
<div class="fs-labelInfo-text">
{{header}}
</div>
<img class="fs-labelInfo-img"
ng-click="update(header)"
src="Components/Directives/images/questionMark.png" />
</div>
The inner directive (Label) directive java script:
angular.module('reusableDirectives')
.directive('labelInfo', function () {
return {
restrict: 'E',
scope: {
isolatedLabelHide: '#hidelabel'
},
controller: function ($scope, $element, $modal, $log, $http, $rootScope, myService) {
$scope.header = "header attribute";
$scope.caption = "label caption";
$scope.ok = function (header) {
myService.getLabelInfo(header).then(function (data) {
//this will execute when the AJAX call completes.
$scope.items = data;
console.log(data);
$scope.open();
});
};
$scope.open = function () {
$log.info('open');
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
header: function () {
return $scope.header;
},
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function () {
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
},
link: function (scope, element, attrs) {
scope.header = attrs.header;
},
templateUrl: '/Components/Directives/LabelInfo.html'
};
});
angular.module('reusableDirectives')
.controller('ModalInstanceCtrl', function ($scope, $modalInstance, header, items) {
$scope.items = items;
$scope.header = header;
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
The html that I'm using to test is:
One example to show the label:
<rank hide="false" value="3.5"></rank>
Another example to show the label:
<rank value="3.5"></rank>
example to hide will be:
<rank hide="true" value="3.5"></rank>
Thank you for your effort.
Best regards,
Chen
You set the scope property name as "hideLabel":
scope.hidelabel = attrs.hide;
So, you need to use "hideLabel" for the ng-hide attribute:
<label-info ng-hide="hideLabel" header="{{header}}"></label-info>
And you need to declare the ng-hide in your "labelInfo" directive template:
<div ng-hide="hideLabel">
(This "div" is the one that comes above <div class="fs-labelInfo-text"> at /Components/Directives/LabelInfo.html.)
So I'm trying to implement a custom confirm box using Angular. Ideally, I would simply like to add an attribute to enable the functionality. Example:
<button type="button" ng-click="delete(foo)">Delete</button> -> <button type="button" ng-click="delete(foo)" ng-confirm="Are you sure you want to delete this foo?">Delete</button>
(foo is inside an ng-repeat... foo in fooList..)
So all of the problems I am having revolve around tying the click event that would normally happen to a different button. I have a seperate directive "confirmBox" that will create my modal (not using bootstrap) and handle all of the showing/hiding/etc.
What I am currently using requires me to alter my ng-click functionality, which I really want to get away from:
Current Implementation:
<button ... ng-click="confirm('Are you sure you want to delete this foo?, 'delete', foo)">Delete</button>
var confirmModule = angular.module('confirm', []);
confirmModule.run(function($rootScope) {
$rootScope.confirm = function(text, func, obj) {
$rootScope.$broadcast('confirm', func, obj, text);
};
});
confirmModule.directive('confirmBox', function($parse) {
return {
restrict: 'A',
template: myModalTemplate,
link: function(scope, element, attrs){
element.hide();
var noBtn = element.find("[name='no']");
noBtn.bind("click", function() {
element.hide();
});
scope.$on("confirm", function(event, func, obj, text) {
var yesBtn = element.find("[name='yes']");
element.show();
yesBtn.unbind("click").bind("click", function() {
scope[func](obj);
});
});
}
}
});
Anyone have any ideas? I started by adding the directive for the button and then unbinding the click event so ng-click doesn't fire. Then I am left with the string 'delete(foo)' from the ng-click attribute that I can execute with $parse(attrs.ngClick)(scope), but I don't know how to tie that to the separate directives button click.
Edit: Here is a fiddle with my current attempt at implementation. The problem is the variable being passed in to the function is always undefined.
http://jsfiddle.net/UCtbj/2/
Edit2: Updated implementation, however I don't particularly like how it links the two directives together by targetting the other directives elements.
http://jsfiddle.net/UCtbj/3/
It seems to me that you're trying to do things the jQuery way from within the directive. However, what you want is as simple as pulling in the UI-Bootstrap directive for confirming actions. http://plnkr.co/edit/JhfAF1?p=preview
First simple service for modal windows:
app.service('ConfirmService', function($modal) {
var service = {};
service.open = function (text, onOk) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalConfirmCtrl',
resolve: {
text: function () {
return text;
}
}
});
modalInstance.result.then(function (selectedItem) {
onOk();
}, function () {
});
};
return service;
})
app.controller('ModalConfirmCtrl', function ($scope, $modalInstance, text) {
$scope.text = text;
$scope.ok = function () {
$modalInstance.close(true);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
Then simple directive that uses it:
app.directive('confirm', function(ConfirmService) {
return {
restrict: 'A',
scope: {
eventHandler: '&ngClick'
},
link: function(scope, element, attrs){
element.unbind("click");
element.bind("click", function(e) {
ConfirmService.open(attrs.confirm, scope.eventHandler);
});
}
}
});
And here u go:
<button ng-click="test(12)" confirm='Are you sure?'>Button</button>
http://plnkr.co/edit/LOZOnsVyx3JU5XoKYn74?p=preview
To allow a button to be marked up like
<button type="button" ng-click="deleteItem(drink)" ng-confirm="Are you sure you want to delete '{{drink.name}}'">Delete</button>
You can write a directive that
Intercepts the click event before ngClick's click handler can run
Opens a dialog (using $modal and not the removed $dialog)
On close of the dialog (which is treated as a success) run the function specified by the ngClick attribute on the element.
Basing the code on the previous answer, you can do this as follows:
app.directive('ngConfirm', function($modal, $parse) {
return {
// So the link function is run before ngClick's, which has priority 0
priority: -1,
link: function(scope, element, attrs) {
element.on('click', function(e) {
// Don't run ngClick's handler
e.stopImmediatePropagation();
$modal.open({
templateUrl: 'ng-confirm-template',
controller: 'ngConfirmController',
resolve: {
message: function() {
return attrs.ngConfirm;
}
}
}).result.then(function() {
// Pass original click as '$event', just like ngClick
$parse(attrs.ngClick)(scope, {$event: e});
});
});
}
};
});
which needs a simple controller:
app.controller('ngConfirmController', function($scope, $modalInstance, message) {
$scope.message = message;
$scope.yes = function() {
$modalInstance.close();
};
$scope.no = function() {
$modalInstance.dismiss();
};
});
and template for the dialog:
<script type="text/ng-template" id="ng-confirm-template">
<div class="modal-body">
<p>{{message}}</p>
</div>
<div class="modal-footer">
<button class="btn btn-link pull-left" ng-click="no()">No</button>
<button class="btn btn-primary pull-right" ng-click="yes()">Yes</button>
</div>
</script>
You can see this running at http://plnkr.co/edit/Gm9lFsGb099w6kCMQoVY?p=preview
Edit: changed plunker link to example without scrollbar appearing/disappearing on display of the dialog
Here is a nice directive for that.That is ngBootbox. Check it out.
<button class="btn btn-lg btn-primary"
ng-bootbox-title="A cool title!"
ng-bootbox-custom-dialog="Some custom text"
ng-bootbox-buttons="customDialogButtons"
ng-bootbox-class-name="some-class">
Custom dialog
</button>
<script>
$scope.customDialogButtons = {
warning: {
label: "Warning!",
className: "btn-warning",
callback: function() { $scope.addAction('Warning', false); }
},
success: {
label: "Success!",
className: "btn-success",
callback: function() { $scope.addAction('Success!', true) }
},
danger: {
label: "Danger!",
className: "btn-danger",
callback: function() { $scope.addAction('Danger!', false) }
},
main: {
label: "Click ME!",
className: "btn-primary",
callback: function() { $scope.addAction('Main...!', true) }
}
};
</script>
Demo
ngBootbox
I created a repo for this functionality. It wraps the ui-bootstrap modal to produce a confirmation box. It is customizable and easily integrated into any application.
Here is the link to the GitHub: https://github.com/Schlogen/angular-confirm
Example Usages:
As a directive:
<button type="button" ng-click="delete()" confirm-if="checked" confirm="Are you sure, {{name}}?">Delete</button>
As a service:
$confirm({text: 'Are you sure you want to delete?'})
.then(function() {
$scope.deletedConfirm = 'Deleted';
});
Ok, here is the one I ended up going with
1) Create a service for the dialog
app.service('dialogModal', [
'$modal', function($modal) {
return function(message, title, okButton, cancelButton) {
okButton = okButton === false ? false : (okButton || 'Yes');
cancelButton = cancelButton === false ? false : (cancelButton || 'No');
var modalInstance = $modal.open({
templateUrl: '/templates/deletePrompt.html',
controller: ModalInstanceCtrl,
resolve: {
settings: function() {
return {
modalTitle: title,
modalBody: message,
okButton: okButton,
cancelButton: cancelButton
};
}
}
});
// return the modal instance
return modalInstance;
}
}
]);
2) Create a controller and pass the model instance in it
var ModalInstanceCtrl = function ($scope, $modalInstance, settings) {
angular.extend($scope, settings);
$scope.ok = function () {
$modalInstance.close(true);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
3) included the link into the header to take on default styling
<link data-require="bootstrap-css#3.x" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
4) overwrote the styling in my own css
5) Here is my delete prompt template
<div id="overlayClearMainDiv" class="dialog-modal">
<div id="overlayClearText">
<span>{{modalBody}}</span>
</div>
<div id="overlayClearButton">
<button id="overlayClearYesButton" class="confirmButton" type="button" ng-click="ok()" ng-show="okButton">{{okButton}}</button>
<button class="confirmButton-white" ng-click="cancel()" ng-show="cancelButton">{{cancelButton}}</button>
</div>
</div>
Here's a quick one for you - http://plnkr.co/edit/YklthDZcknmvMjU5A6pe?p=preview
So basically if you are interested in showing a modal dialog once a user clicks on let's say, a button there's no need to make it difficult.
All you need is a simple directive that encapsulate $modal service found in ui-bootstrap.
In my simple example I just pass in a string representing a message and then defining a on-confirm attribute that my directive invokes once the user confirms. Invoking the function itself leverages the awesomeness of $parse to resolve the expression and once resolved, invoke it with the scope.
Nice and clear and here's how it looks like.
View
<body ng-controller="AppController">
<input type="button" value="Delete"
confirm="'Are you sure you want to delete me?'" on-confirm="delete()" />
<script type="text/ng-template" id="modal.html">
<div class="modal-header">
<h3 class="modal-title">Confirm</h3>
</div>
<div class="modal-body">
<p>The world won't be a better place if you delete me.</p>
</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>
</body>
Controller / Directive
angular
.module('App', ['ui.bootstrap'])
.controller('AppController', ['$scope', function($scope){
$scope.delete = function(){
alert('Woho, Im deleted!');
};
}])
.directive('confirm', ['$modal', '$parse', function($modal, $parse){
return {
link: function(scope, el, attr){
el.bind('click', function(){
var instance = $modal.open({
templateUrl: 'modal.html',
controller: ['$scope', '$modalInstance', modalController]
});
instance.result.then(function(){
// close - action!
$parse(attr.onConfirm)(scope);
},function(){
// dimisss - do nothing
});
});
}
};
function modalController(modalScope, $modalInstance){
modalScope.ok = function(){
modalInstance.close();
};
modalScope.cancel = function(){
modalInstance.dismiss();
};
}
}]);