javascript - AngularJSで送信中に無効にする必要があるボタンを実装する最良の方法は何ですか?

Question

送信ボタンのあるフォームがあります。フォームが戻るまでに 10 秒かかります。その間、ユーザーがフォームをクリックしたくありません。これまでの私のアプローチは、ボタンのテキストを に設定し、submit( ) を実行するときに設定するフラグをbuttonText="Loading..."使用してきました。これが一般的なパターンでなければならないことを考えると、これを行うための最良かつ最も再利用可能な方法は何ですか?ng-disableisSubmitted

Answer 1

カスタム ディレクティブを使用して再利用可能なコンポーネントを作成します。ディレクティブは、isolate スコープを作成し、'&' 構文を使用して、ボタンがクリックされたときに呼び出す親スコープ関数を指定する必要があります。コールバック関数を渡して、タスクの完了時にディレクティブがボタン ラベルの変更と無効な属性を元に戻すことができるようにします。

HTML:

<button wait-button do-stuff="doStuff(cbFn)">button label</button>

指令：

myApp.directive('waitButton', function() {
    return {
        scope: {
            doStuff: '&'
        },
        link: function(scope, element) {
            var normalText = element.text();
            var callbackFn = function() {
                console.log('callback')
                // element[0] is the (unwrapped) DOM element
                element[0].disabled = false;
                element.text(normalText);
            }
            element.bind('click', function() {
                element[0].disabled = true;
                element.text('Loading...');
                // Weird syntax below!  Arguments must 
                // be passed inside an object:
                scope.doStuff({cbFn: callbackFn});
            })
        }
    }
})

function MyCtrl($scope, $timeout) {
    $scope.doStuff = function(callbackFn) {
        console.log('doStuff');
        // Do stuff here... then call the callback.
        // We'll simulate doing something with a timeout.
        $timeout(function() {
            callbackFn()
        }, 2000)
    }
}

フィドル

Answer 2

jQuery .delegate関数の使用をお勧めします: "#" = コントロール ID と"."を覚えておいてください。= CSS クラス

    $("#create").click(function(){
        $('body').append($('<div id="test" class="btn">click me<div>'));
    });

    //-- if you create single button use this
    $("body").delegate("#test", "click", function() {
       alert("worked!"); 
     });

    //-- if you create many buttons use this
    // $("body").delegate(".btn", "click", function() {
      // alert("worked!"); 
    // });