An Angular.js Confirm Dialog Directive ftw!

We got a complaint from a user who flagged an image by accident, see this issue. As we are now entering a phase of Complaint Driven Development, this morning I found a great little fix to this. Angular.js which we use for the web client, does not come with a built-in confirmation dialogue. However, here is a great little generic confirm-button directive that avoids the onClick method and can be reused.

Peter Neubauer
Peter Neubauer
18 Mar 2014

This is how it turned out:

angular.module('mapapp')
  .directive 'ngConfirmClick', [() ->
    restrict: 'A'
    replace: false
    link: ($scope, $element, $attr) ->
      msg = $attr.ngConfirmClick || "Are you sure?"
      clickAction = $attr.confirmedClickAction;
      $element.bind('click',(event) ->
        if window.confirm(msg)
          $scope.$eval(clickAction)
      )
      ]

Having done this, we can now just change the HAML-template code from

%span.set_flag{'ng-show' => '!flagged', 'ng-click' => 'flagImage(nav.currentImage)'}

to something like

%span.set_flag{'ng-show' => '!flagged', 'confirmed-click-action' => 'flagImage(nav.currentImage)', 'ng-confirm-click'=>'Are you sure to flag this image?'}

Resulting in this:

Voilá, another closed issue :)

/peter

Continue the conversation