Question

我有一个指令，检查他们是否点击表单上的提交。如果是这样，它会添加＆＃39;已提交的＆＃39;类。这样我就可以只在提交表单时将表单输入设置为红色（我讨厌在他们打字的时候实时红色）。

'use strict';


app.directive('formSubmitted', function() {
  return {
    restrict: 'A',
    require: 'form',
    link: function(scope, element, attrs, ctrl) {
      ctrl.$submitted = false;
      element.on('submit', function() {
        scope.$apply(function() {
          ctrl.$submitted = true;
          element.addClass('submitted');
        });
      });
    }
  };
});

问题是＆＃39;重置＆＃39;一个表单成功提交后......我需要从控制器内部删除submitted类。我已经尝试了很多方法来做到这一点但没有成功......就像这个伪代码......

angular.element($scope.myForm).removeClass('submitted');

我在想的不是从控制器那里做到这一点（无论如何都不起作用），我尝试将其提交给＃39; class镜像ctrl上的$ submitted属性......这样我就可以......

$scope.myForm.$submitted = false，课程会适当更新。

我甚至不知道从哪里开始，谷歌搜索并没有帮助......

谢谢！

Answer 1

我在这种情况下使用的一种简单方法是利用Angular ngClass指令并绑定到控制器上的属性，该属性维护状态是否已提交。像这样：

<button ng-click="isSubmitted = !isSubmitted">Submit</button>
<form ng-class="{submitted: isSubmitted}">

</form>

Answer 2

您可以使用ng-class指令：

<form name="myForm" ng-class="{submitted: $submitted}">

请参阅此处的文档：https://docs.angularjs.org/api/ng/directive/ngClass

在处理表单提交的控制器中，您当然有一个提交功能：

$scope.submit = function (form) {
    $scope.$submitted = true;
    if (form.$invalid) {
        return;
    }

    // Actually send data to backend, eventually receiving a promise
    promiseFormBackend = MyService.sendForm();
    promiseFromBackend.then(function () {
        $scope.$submitted = false: // resetting the form class
    });
}

修改指令以“监视”ctrl属性？

2 个答案: