修改指令以“監視” ctrl屬性？

Question

我有一條指令，檢查他們是否單擊表單上的提交。 如果是這樣，它將添加“已提交”類。 這使我僅在提交表單時才將表單輸入設置為紅色（我討厭在輸入時將其實時顯示為紅色）。

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

問題是一旦成功提交表單，就會“重置”表單。我需要從控制器內部刪除submitted類。 我已經嘗試了很多方法來完成此操作，但沒有成功...就像下面的偽代碼一樣...

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

我在想的是代替控制器執行此操作（無論如何也不起作用），而是嘗試使“ submitted”類鏡像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
    });
}