4

我有这段 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 仍然会被触发，无论我做什么。

演示：小提琴

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

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

第一次点击一个按钮，它会变成红色，并且不会触发任何动作。第二次单击，调用动作。离开按钮会重置整个过程。

4

2 回答 2

2

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

ui:confirm="action()"

使用scope.$eval()：

element.bind('click', function(event) {
    scope.$eval(attrs.uiConfirm);  // calls action() on the scope
});
于 2013-03-14T21:17:56.120 回答
1

您有两个嵌套指令：

  1. uiConfirm
  2. ng点击

然后将两个事件处理程序绑定到它（一个由 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.
            };
        }
    }
})
于 2013-03-13T17:21:57.860 回答