Question

我有这段HTML

<button ui:confirm ng:click="action"></button>

和一些JavaScript

.directive('uiConfirm', function()
{
    return {
        restrict: 'A',
        link: function(scope, element, attrs)
        {
            element.bind('click.confirm', function(event)
            {
                event.preventDefault();
                event.stopPropagation();
            });
        }
    }
})

现在，我正在尝试做的是从指令中取消ng：click事件。但是无论我做什么，ng：click仍然会被触发。

演示：Fiddle

编辑：顺便说一句，在此范围内导致错误：

element.bind('click.confirm', function(event)
{
    causeAnError();
    event.preventDefault();
    event.stopPropagation();
});

诀窍，并取消事件传播，但也抛出和丑陋的错误=）

编辑2：最后我找到了解决方案！

.directive('uiConfirm', function()
{
    return {
        restrict: 'A',
        link: function(scope, element, attrs)
        {
            element.bind('click', function(event)
            {
                scope.$eval(attrs.uiConfirm); // this line of code does the magic!
            });
        }
    }
})

编辑3：

最终解决方案

.directive('uiConfirm', function()
{
    return {
        restrict: 'A',
        link: function(scope, element, attrs)
        {
            /**
             * Clicking the trigger start the confirmation process.
             */
            element.bind('click.confirm', function(event)
            {
                // not confirmed?
                if( ! element.data().confirmed)
                {
                    element.data().confirmed = true;
                    element.addClass('btn-danger');
                }
                // is already confirmed..
                else
                {
                    element.trigger('mouseout.confirm');
                    scope.$eval(attrs.uiConfirm);
                }
            });

            /**
             * Leaving the element, resets the whole process.
             */
            element.bind('mouseout.confirm', function()
            {
                // reset all values
                element.data().confirmed = false;
                element.removeClass('btn-danger');
            });

            // reset the whole process on the first run
            element.trigger('mouseout.confirm');
        }
    }
})

第一次单击按钮，将其变为红色，并且不会触发任何操作。再次单击，调用该操作。离开按钮会重置整个过程。

Answer 1

正如对@Flek的回答的评论中所讨论的，要调用属性中定义的函数，

ui:confirm="action()"

使用scope.$eval()：

element.bind('click', function(event) {
    scope.$eval(attrs.uiConfirm);  // calls action() on the scope
});

Answer 2

您有两个嵌套指令：

uiConfirm
ngClick

然后绑定两个事件处理程序（一个通过uiConfirm，另一个通过ngClick）。使用 preventDefault ，您希望停止默认操作，但我想按钮的默认操作不是调用action（）方法。 stopPropagation 只是阻止事件从冒泡向上生成DOM树，但由于您只关心按钮本身，因此它不会改变任何内容。

我要做的是在指令中创建自定义操作方法，然后检查它是否应该执行某些操作。

.directive('uiConfirm', function()
{
    return {
        restrict: 'A',
        link: function(scope, element, attrs)
        {
            scope.action = function(){
                // Check whether there is something to do or not.
            };
        }
    }
})

Angular.js，取消ng-click事件

2 个答案: