在Angular的隔离范围指令中禁用/重新启用按钮

Question

我需要在用Angular进行单击后启用/禁用按钮。当用户点击“提交表单”时，它会发出http请求。如果发生错误（在catch内），我想重新启用指令按钮，以便用户可以再次尝试。我有一个使用controllerAs语法和isolateScope的指令。下面是我的代码（在这里简化）;

myCtrl父控制器（controllerAs是myCtrl）

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

父视图与my-form指令

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

myForm指令

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