javascript - 我可以链接 Angular Directive(指令)吗？

Question

所以我有一个可以删除内容的按钮。

我创建了一个“确认删除”指令，它只是打开一个带有确认消息的 $modal，并且我有一个先前创建的“加载微调器”指令，它显示一个微调器，直到 promise 得到解决/拒绝。

有没有办法组合/链接这些指令而不创建新指令？

我想触发确认指令，然后根据真实结果，归档加载微调器指令。

提前致谢!

确认删除:

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;
})();

加载旋转器:

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;
})();

使用示例:

<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 />

使用优先级来确保正确的顺序。