角度範囲内の分離スコープ命令内の無効/再有効化ボタン

Question

クリック後に角度を使用してボタンを有効/無効にする必要があります。ユーザーが[フォームを送信]をクリックすると、httpリクエストが送信されます。エラーが発生した場合（catch内）、ユーザーが再試行できるように指示ボタンを再度有効にします。私はcontrollerAsの構文とisolateScopeという指示文を持っています。以下は私のコードです（ここでは簡略化されています）。

myCtrl親コントローラ

vm.submit = function() { 
     MyService 
     .update() 
     .then(function(res) { 
      // success 
     }) 
     .catch(function(err) { 
      vm.error = true; 
      // error 
     }); 
    }; 

親ビュー指令

<my-form form-submit='myCtrl.submit()'></my-form> 

myForm指令my-formと

（controllerAsは myCtrlあります）

function myForm() { 
    return { 
     restrict: 'E', 
     replace: true, 
     templateUrl: 'myform.html', 
     scope: { 
     formSubmit: '&', 
     }, 
     require: ['form', 'myForm'], 
     link: function(scope, element, attrs, ctrls) { 
     var formCtrl = ctrls[0]; 
     var directiveCtrl = ctrls[1]; 

     scope.isButtonDisabled = false; 

     scope.submit = function() { 
      scope.submitted = true; 
      directiveCtrl.submit(); 
     }; 
     }, 
     controller: function($scope, $element, $attrs) { 
     var vm = this; 

     // Submit parent function 
     vm.submit = function() { 
      vm.formSubmit(); 
     }; 
     }, 
     controllerAs: 'myFormCtrl', 
     bindToController: true 
    }; 
    } 

    angular.module('mymodule') 
    .directive('myForm', [ myForm ]); 

myFormディレクティブテンプレート

<form name='myForm' novalidate> 
    // form fields 
    <button ng-click='submit()' ng-disabled='isButtonDisabled'>Submit Form</button> 
</form> 

Answer 1

代わりに親のコントローラで解決約束を有するので、あなただけのバックの子コントローラへの約束を渡し、そこにロジックを扱うことができます。このような何か作業をする必要があります：

親：

vm.submit = function() { 
    return MyService.update().$promise; 
}; 

子：

vm.submit = function() { 
     vm.formSubmit().then(function(res) { 
     // success 
    }) 
    .catch(function(err) { 
     vm.error = true; 
     // error 
     scope.isButtonDisabled = false; 
    }); 
}