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

【问题标题】：Disable/re-enable button within isolate scope directive in Angular在Angular中的隔离范围指令中禁用/重新启用按钮
【发布时间】：2016-12-13 20:02:49
【问题描述】：

点击 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>

【问题讨论】：

标签： javascript angularjs angularjs-directive angular-directive

【解决方案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;
    });
}

【讨论】：