Can I chain angular directives?

Question

So I've got a button which will delete a thing.

I've created a 'confirm delete' directive which simply opens a $modal with a confirmation message and I've got a previously created 'loading spinner' directive which shows a spinner until a promise is resolved/rejected.

Is there any way to combine/chain these directives without creating a new one?

I would like to fire the confirm directive, then on a truthy result, file the loading spinner directive.

Thanks in advance!

ConfirmDelete:

var ConfirmDeleteDirective = (function () {
    function ConfirmDeleteDirective($parse, $modal) {
        var _this = this;
        this.$parse = $parse;
        this.$modal = $modal;
        this.restrict = "A";
        this.link = function (scope, element, attrs) {
            var func = _this.$parse(attrs["confirmDelete"]);

            element.on("click", function (evt) {
                var mInstance = _this.$modal.open({
                    backdrop: "static",
                    templateUrl: "confirmDelete.html"
                });

                mInstance.result.then(function () {
                    if (func) {
                        func.apply(element);
                    }
                }, function () {
                    //do nothing!
                });
            });
        };
    }
    return ConfirmDeleteDirective;
})();

LoadingSpinner:

var LoadingSpinnerDirective = (function () {
function LoadingSpinnerDirective($parse) {
    var _this = this;
    this.$parse = $parse;
    this.restrict = "A";
    this.link = function (scope, element, attrs) {
        if (attrs["targetElement"]) {
            var targetElement = angular.element("#" + attrs["targetElement"]);
            if (targetElement.length > 0) {
                element = targetElement;
            }
        }

        var fn = _this.$parse(attrs["loadingSpinner"]), target = element[0], eventName = attrs["eventName"] || "click", opts = {
            lines: 11,
            length: 9,
            width: 2,
            radius: 4,
            corners: 1,
            rotate: 0,
            direction: 1,
            color: "#fff",
            speed: 1.3,
            trail: 60,
            shadow: false,
            hwaccel: false,
            className: "spinner",
            zIndex: 2e9,
            top: attrs["spinner-top"] || "50%",
            left: attrs["spinner-left"] || "50%"
        };

        // implement our click handler
        element.on(eventName, function (event) {
            scope.$apply(function () {
                element.prop("disabled", true);
                element.css("position", "relative");
                var spinner = new Spinner(opts).spin(target);

                // expects a promise
                // http://docs.angularjs.org/api/ng.$q
                fn(scope).then(function (res) {
                    element.prop('disabled', false);
                    spinner.stop();
                    return res;
                }).catch(function (res) {
                    element.prop('disabled', false);
                    spinner.stop();
                });
            });
        });
    };
}
return LoadingSpinnerDirective;
})();

usage examples:

<button class="btn btn-default" loading-spinner="saveAttribute(model)">Save</button>
<button class="btn" confirm-delete="deleteAttribute(attribute)">Delete</button>

Answer 1

<div loading-spinner confirm-delete />

Use priorities to ensure the right order.