1

当您有一个优先级 > 0 的自定义 ng-click 指令首先触发时，是否可以阻止内置的 ng-click 处理程序触发？或者以某种方式延迟内置的？

在我的情况下，我有一个自定义 ngClick 指令，它将动画应用于元素，然后等待动画完成。一旦完成，只有到那时，内置的 ngClick 才会触发。推理是单击的元素位于滑出式抽屉上，该抽屉自动隐藏在 ngClick 处理程序中。如果指令不能阻止它触发，那么抽屉在动画开始之前就关闭了。

从自定义指令中，我可以使用它来调用默认的 ngClick，但在这种情况下需要取消原来的...

要求：该解决方案不应要求开发人员在其 ngClick 处理程序中编写任何代码。 我绝对可以在控制器中对此进行编码，但希望避免让控制器知道它应该等待。（即，如果我更改指令实现指标的方式并且需要不同的时间）

$timeout(function() {service.close();}, 400);

这是我想要完成的一个例子。

标记

<li ng-repeat="product in service.products"
    ng-click="onClick('{{product}}')"
    pre-click="onClicking('{{product}}')"
    animate="wasClicked(product)">
    {{product}}
</li>

指示

angular.module('sales.directives')
    .directive('ngClick', [
        '$timeout',
        function ($timeout) {
            return {
                priority: 50,  // higher priority
                restrict: 'A',
                scope: false,
                link: function (scope, element, attributes) {
                    element.bind('click', function () {
                        if (attributes.preClick) {
                            eval('scope.' + attributes.preClick);
                        }
                    });

                    if (attributes.animate !== undefined) {
                        scope.$watch(attributes.animate, function (newValue) {
                            if (newValue == true) {
                                element.addClass('animated');
                                // pause 400ms so animation can complete
                                $timeout(angular.noop, 400)
                                    .then(function () {
                                        element.removeClass('animated');
                                        // I would like to invoke the original 
                                        // ngClick here, and then remove it from the 
                                        // queue so that it doesn't fire it again.
                                        // Reason for invoking it here is that if I
                                        // don't, then the base ngClick event will
                                        // fire before this promise is resolved.
                                        eval('scope.' + element.ngClick);
                                        // ??
                                    });
                            }
                        });
                    }
                }
            };
        }]);

控制器

angular.module('sales')
    .controller(
        'ProductController',
        [
            '$scope', 'ProductService',
            function ($scope, $timeout, service) {

                $scope.clickedProduct = null;

                $scope.onClicking = function (product) {
                    $scope.clickedProduct = product;
                };

                $scope.wasClicked = function (product) {
                    return $scope.clickedProduct === product;
                };

                $scope.onClick = function (product) {
                    service.selected = product;
                };
            }
        ]);

有什么想法吗？有一个更好的方法吗？

4

0 回答 0