1

ブートストラップjsプラグインを介してボタンの読み込み状態を変更するために、次のディレクティブを使用して調整しようとしています:

.directive("btnLoading", function() {
return function(scope, element, attrs) {
    scope.$watch(function() {
        return scope.$eval(attrs.btnLoading);
    }, function(loading) {
        if (loading)
            return element.button("loading");
        element.button("reset");
    });
};

これは、必要に応じてボタンの状態を制御し、宣伝どおりに読み込みテキストを追加するため、非常にうまく機能しています。私が直面している問題は、このディレクティブがボタンに適用され、フォームが無効なときに ng-disabled を使用すると、ボタンが有効になり、このディレクティブを適用する前に使用されていたように無効にならないことです。ボタン。ボタンで私の ng-disabled は次のとおりです。

ng-disabled="form.$invalid"

これら 2 つのディレクティブを調整して、読み込みディレクティブ内で無効状態がリセットされないようにする方法はありますか?

編集 あなたの提案に基づいて、私は次のコードになりました:

   .directive("btnLoading", function () {
       return function (scope, element, attrs) {
           scope.$watch(function () {
               return scope.$eval(attrs.ngDisabled);
           }, function (newVal) {
               //you can make the following line more robust
               if (newVal) {
                   return;
               } else {
                   return scope.$watch(function () {
                       return scope.$eval(attrs.btnLoading);
                   },

                   function (loading) {
                       if (loading) return element.button("loading");
                       element.button("reset");
                   });
               }
           });
       };
   })

関数を使用して ng-disabled の eval の変更を監視する必要がありました。そうしないと、値/変更された値ではなく、変更を評価するために必要な関数のみが返されます。さらに、クリック/保存イベントを監視するために btn 読み込みの監視を追加し、それが変更されたら読み込み状態を設定します。これが最良のオプションかどうかはわかりませんが、それが私が理解できる唯一の動作するコードでした.

4

1 に答える 1

2

親のスコープでプロパティをリッスンできますng-disabled。無効になっている場合は、単に何もしません。

トリックは、ngdisabledこのようにプロパティで見ることです

scope.$watch(attrs.ngDisabled, function (newVal) {...

他の部分なしではコードをテストできないため、いくつかの光を当てたいと思います。おそらく次のようなことができます。

.directive("btnLoading", function () {
    return function (scope, element, attrs) {

        //maybe you need just scope.$watch instead of scope.$parent.$watch. Depends on your impl.
        scope.$parent.$watch(attrs.ngDisabled, function (newVal) {

            //you can make the following line more robust
            if (newVal === 'disabled' || newVal === 'true') return;

            function () {
                return scope.$eval(attrs.btnLoading);
            },

            function (loading) {
                if (loading) return element.button("loading");
                element.button("reset");
            }
        });
    }
});
于 2013-08-02T15:08:07.767 に答える