Geek asks and answers

Extend angularUI popover directive to create popover confirmation

I am trying to create an easy wildcard popover when in angularJS. I already use AngularUI for many other components, so it seems like a natural choice.

I created an example in plnkr, but it is important that I can just add confirmation 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 it works and creates a popover with cancellation or confirmation using my own template. But I need to be able to go through what ever functions in the "confirm-func" attribute in order to be triggered when I click confirm. Whatever I do, I cannot get it to work. Here is my directive that extends the angular UI ...

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: http://plnkr.co/edit/W9BWMc3x5khuaMEL7lp1?p=preview

+3
3

, - ( popover) :

http://wegnerdesign.com/blog/angular-js-directive-tutorial-on-attribute-bootstrap-confirm-button/

. , CSS . :

https://github.com/sergkr/swot/blob/master/client/directives/confirmButton.js

:

<button type="button" confirm-button="deleteQuestion($index)" message="Are you sure you want to remove this question?"></button>

:

Confirmation popover screenshot

+3

confirm-func . tooltip $tooltip. , :

$scope.$parent.deleteThing();


$scope.func();//here is where we want to run the function, but it does not work!
+1

I managed to do what you need, even if it is a little hacked. I did plunk

Basically, the trick is to introduce your own controller into a new instance of the directive that returns $ tooltip.

var tt = $tooltip( 'confirm', 'confirm', 'click' );
tt.controller = 'ConfirmCtrl';
return tt;

And you must configure the Popopver template so that they can call your controller method

<button class="btn-block btn btn-danger" ng-click="$parent.confirm()">Confirm </button>

The last part is calling the confirmation handler from your controller.

var fn = $parse($attrs.confirmHandler);

$scope.confirm = function(){
  fn($scope);
  $scope.tt_isOpen  = false;
};

Hope this helps! I am not an angular expert, so any comments / feedback on this method is welcome.

+1
source

More articles:


All Articles