javascript - 使用服务更新 ng-change 上的焦点元素 ng-class

Question

我想让我的服务能够处理任何输入字段。目前我正在手动编写所有内容，并且开始涉及大量手动工作。有没有办法在调用 elements ng-change 属性时发送元素对象？然后我可以更改元素 ng-class 作为结果。

HTML:

<input type="text" id="email" data-ng-model="email" data-ng-change="changeEmail()" placeholder="your email here" data-ng-class="emailFormControlColor">

在 Controller 中:

$scope.changeEmail = function () {
    if ($checkInput.checkEmail($scope.email)) {
        // email input is good
        $scope.emailFormControlColor = 'form-control-success'; // change from error to success
    } else {
        // email input is bad
        if ($scope.emailFormControlColor === 'form-control-success') 
            $scope.emailFormControlColor = 'form-control-error'; // change from success to error
    }
};

服务(这包含在 c 的 Controller 参数中。):

.service('checkInput', ['$controller', '$window', '$location', function ($controller, $window, $location) {
    return {
        checkEmail: function (email) {
            // <--- I would like to update the ng-class of the focused element here! This would result in me not manually having to write code for each input!
            var regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return regex.test(email);
        }
    };
}])

上面的代码就是我现在的样子。如您所见，我正在手动更改 $scope.emailFormControlColor。

假设我有三个输入字段:

<input type="text" id="email1" data-ng-model="email1" data-ng-change="changeEmail()" placeholder="your email here" data-ng-class="emailFormControlColor1">
<input type="text" id="email2" data-ng-model="email2" data-ng-change="changeEmail()" placeholder="your email here" data-ng-class="emailFormControlColor2">
<input type="text" id="email3" data-ng-model="email3" data-ng-change="changeEmail()" placeholder="your email here" data-ng-class="emailFormControlColor3">

我如何编写我的服务，这样我就不必手动编写以下内容:

$scope.emailFormControlColor1 = 'form-control-success';
$scope.emailFormControlColor2 = 'form-control-success';
$scope.emailFormControlColor3 = 'form-control-success';

我希望我的问题很清楚，否则我会更新它!

Answer 1

我认为使用指令来解决这个问题更可取。首先，修改 Controller 或服务中的 DOM 被认为是一种反模式。

另一个原因是，当您使用指令时，您将获得使用该指令的 DOM 元素。以下是一些未经测试的代码，您可以将其用作起点:

myModule.directive('checkEmail', function() {
  require: 'ngModel',
  link: function(scope, element, attributes, ngModelController) {
    // require that ng-model is used on this element, so you can hook
    // into the Angular validator pipeline ... 
    ngModelController.validators.checkEmail = function(modelValue, viewValue) {
      // now return true or false if viewValue is considered valid
      var regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      var isValid = regex.test(viewValue);
      // but you also have an opportunity to do your DOM manipulation
      element.toggleClass('form-control-success', isValid);
      element.toggleClass('form-control-error', !isValid);
      return isValid;
    });
  }
});

您可以只使用 Angular 的内置验证系统，而不是像上面那样应用 CSS 类。您的指令代码与上面相同，只是您不在指令中应用任何 CSS 类。当指令中的验证代码返回 false 时，Angular 将使该字段无效......您可以使用此事实在 HTML 中应用 CSS:

<form name="myForm">
  <input ng-model="whatever"
         name="email" 
         check-email
         ng-class="{'form-control-success': myForm.email.$valid, 'form-control-error': myForm.email.$invalid}">
</form>

上面的内容在字段无效时应用 CSS，但您也可以在发生特定验证错误时应用它，在这种情况下，我们将验证器命名为“checkEmail”，因此这也可以工作:

<form name="myForm">
  <input ng-model="whatever"
         name="email" 
         check-email
         ng-class="{'form-control-success': !myForm.email.$error.checkEmail, 'form-control-error': myForm.email.$error.checkEmail}">
</form>