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