confirmButton.js

'use strict';

angular.module('frontendApp')
    .directive('confirmButton', function (Data) {
        return {
            restrict: "E",
            replace: true,
            template: "<a id=\"{{my_id}}\" class=\"btn btn-danger confirmation-popover-button\" ng-click=\"show()\" >\n  <i class=\"halflings-icon {{icon || 'trash'}}\"></i>\n</a>",
            scope: {
                confirm: '&',
                icon: '@'
            },
            link: function (scope, elm, attrs) {
                scope.my_id = "my-confirm-button-" + (Data.getNewCount());
                scope.click = function () {
                    scope.confirm();
                    return elm.popover('hide');
                };
                scope.cancel = function () {
                    return elm.popover('hide');
                };
                scope.show = function () {
                    $(".confirmation-popover-button").each(function (i, e) {
                        if ($(e).attr("id") !== scope.my_id) {
                            return $(e).popover("hide");
                        }
                    });
                    return elm.popover("show");
                };
                return elm.popover({
                    title: "Are you sure?",
                    html: true,
                    trigger: "manual",
                    content: "<div class='my-confirmation-popover' class='btn-toolbar'>\n  <button ng-click='cancel()' class='btn btn-link'>No</button>\n  <button class='btn btn-danger' ng-click='click()'>Yes</button>\n</div>"
                }).on("shown", function () {
                        var h;
                        h = $(".my-confirmation-popover").contents();
                        return $compile(h)(scope);
                    });
            }
        };
    });