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

2つのネストされたディレクティブがあります。

  1. uiConfirm
  2. ngClick

次に、2つのイベントハンドラーをバインドします（1つはuiConfirmによって、もう1つは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 に答える