我需要在单击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>
,而不是在父控制器中解决承诺,您只需将诺言传递给子控制器并处理那里的逻辑即可。这样的事情应该有效:
父母:
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;
});
}