I am trying to create a easy confirm popover when in angularJS. I'm already using AngularUI for many other ponents which is why it seems like the natural choice to extend.
I have created a example in plnkr but essential I would like to be able to simply add a confirm to a button like this...
<button confirm="Are you sure you want to delete what ever" confirm-func="deleteThing()" confirm-placement="right" confirm-title="Are you sure?" class="btn btn-default">Delete? </button>
and this works and produces the popover with a cancel or confirm by using my own template. But i need to be able to pass through what ever function in the "confirm-func" attribute to run on confirmation click. What ever I do I can't get it to work. Here is my directive that extends the angularUI...
angular.module('plunker', ['ui.bootstrap']).directive( 'confirmPopup', function () {
return {
restrict: 'A',
replace: true,
scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&', func: '&' },
templateUrl: 'confirmPopup.html',
link: function ($scope, element, attrs) {
$scope.confirm = function(){
$scope.func();//here is where we want to run the function, but it does not work!
$scope.$parent.tt_isOpen = false;
}
$scope.cancel = function(){
$scope.$parent.tt_isOpen = false;
}
}
};
})
.directive( 'confirm', [ '$tooltip', function ($tooltip) {
return $tooltip( 'confirm', 'confirm', 'click' );
}]);
Plunkr example attached:
I am trying to create a easy confirm popover when in angularJS. I'm already using AngularUI for many other ponents which is why it seems like the natural choice to extend.
I have created a example in plnkr but essential I would like to be able to simply add a confirm to a button like this...
<button confirm="Are you sure you want to delete what ever" confirm-func="deleteThing()" confirm-placement="right" confirm-title="Are you sure?" class="btn btn-default">Delete? </button>
and this works and produces the popover with a cancel or confirm by using my own template. But i need to be able to pass through what ever function in the "confirm-func" attribute to run on confirmation click. What ever I do I can't get it to work. Here is my directive that extends the angularUI...
angular.module('plunker', ['ui.bootstrap']).directive( 'confirmPopup', function () {
return {
restrict: 'A',
replace: true,
scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&', func: '&' },
templateUrl: 'confirmPopup.html',
link: function ($scope, element, attrs) {
$scope.confirm = function(){
$scope.func();//here is where we want to run the function, but it does not work!
$scope.$parent.tt_isOpen = false;
}
$scope.cancel = function(){
$scope.$parent.tt_isOpen = false;
}
}
};
})
.directive( 'confirm', [ '$tooltip', function ($tooltip) {
return $tooltip( 'confirm', 'confirm', 'click' );
}]);
Plunkr example attached: http://plnkr.co/edit/W9BWMc3x5khuaMEL7lp1?p=preview
$tooltip service, as far as I understand it, wasn't designed with the aim of opening up the implementation and allowing extension. Rather, it was a nice way for internal code sharing between popup and tooltip (and possibly other directives). I, unfortunately, do not see a easy and direct way of doing this without passing in a piled element to content as $pile(toolTipContent)(scope). However, this is a substantial change needed in angular.ui.
– musically_ut
Commented
Feb 16, 2014 at 21:29
This is not a direct answer to your specific question, but I was looking to do something similar in my project (a simple directive for a confirmation popover) and ended up going with the solution from this blog post:
http://wegnerdesign./blog/angular-js-directive-tutorial-on-attribute-bootstrap-confirm-button/
It has been working out fairly well for me. I've modified it slightly to make it possible to apply custom CSS classes via an attribute. My modifications are here:
https://github./sergkr/swot/blob/master/client/directives/confirmButton.js
Example usage:
<button type="button" confirm-button="deleteQuestion($index)" message="Are you sure you want to remove this question?"></button>
And a screenshot of this directive in action:
There is no way to pass the confirm-func argument directly. You need your own implementation of tooltip directive instead of $tooltip service. There is dirty solution, but I can not remend this way:
You can use
$scope.$parent.deleteThing();
instead of
$scope.func();//here is where we want to run the function, but it does not work!
I've managed to do what you need, even if it feel a bit hackish. I've made a plunk
Basically, the trick is to inject a controller of you own to the fresh directive instance that $tooltip returns.
var tt = $tooltip( 'confirm', 'confirm', 'click' );
tt.controller = 'ConfirmCtrl';
return tt;
And you have to tweak your Popopver template so they can call your controller method
<button class="btn-block btn btn-danger" ng-click="$parent.confirm()">Confirm </button>
The latest piece is to call the confirm handler from your controller
var fn = $parse($attrs.confirmHandler);
$scope.confirm = function(){
fn($scope);
$scope.tt_isOpen = false;
};
Hope it helps! I'm not an angular expert, so any ments / feedback about that method are wele.