Question

HTML：

<div ng-app="app" ng-controller="ctrl">
  <form name="myForm">
    <input 
      name="email" 
      ng-model="email" 
      check-input 
      ng-class="{
        'input-neutral': myForm.email.$error.checkEmail === 'empty',
        'input-valid': myForm.email.$error.checkEmail === 'valid', 
        'input-invalid': myForm.email.$error.checkEmail === 'invalid'}
      ">
  </form>
</div>

的CSS：

input {
  border: 5px;
  border-style: solid;
}
.input-neutral {
  border-color: lightblue;
}
.input-invalid {
  border-color: red;
}
.input-valid {
  border-color: lime;
}

JS：

var app = angular.module('app', []);
app.controller('ctrl', ['$scope', function($scope) {
}]);

app.directive('checkInput', [function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, el, attr, ctrl) {
      ctrl.$validators.checkEmail = function(modelVal, viewVal) {
        if (viewVal) {
          var regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
          var isValid = regex.test(viewVal);
          if(isValid)
            return 'valid';
          return 'invalid';
        }
        return 'empty';
      }
    }
  }
}]);

所以我要做的是当输入字段为空时边框为lightblue，当输入字段填充错误时，边框为red，输入与正则表达式匹配时（例如a@b.c的电子邮件地址）具有边框lime。

边框甚至没有转动lightblue？

完成的代码

HTML：

<div ng-app="app" ng-controller="ctrl">
  <form name="form">
    <input name="email" ng-model="email" check-input="email" ci-empty-class="input-empty" ci-invalid-class="input-invalid" ci-valid-class="input-valid">
    <input name="password" ng-model="password" check-input="password" ci-empty-class="input-empty" ci-invalid-class="input-invalid" ci-valid-class="input-valid">
  </form>
</div>

的CSS：

input {
  border: 5px;
  border-style: solid;
}
.input-empty {
  border-color: lightblue;
}
.input-invalid {
  border-color: red;
}
.input-valid {
  border-color: lightgreen;
}

JS：

var app = angular.module('app', []);
app.controller('ctrl', ['$scope', function($scope) {}]);

app.directive('checkInput', [function() {
  var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  var passwordRegex  = /^.{3,}$/;
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, el, attr, ctrl) {
      if (attr.ciEmptyClass) { // three states; empty, invalid, valid
        // initial class
        el.toggleClass(attr.ciEmptyClass, true);
        // update on input change
        el.on('keyup change', function() {
          if (ctrl.$viewValue) { // value in input exists
            var isValid;
            if(attr.checkInput === 'email')
              isValid = emailRegex.test(ctrl.$viewValue);
            if(attr.checkInput === 'password')
              isValid = passwordRegex.test(ctrl.$viewValue);
            el.toggleClass(attr.ciValidClass, isValid);
            el.toggleClass(attr.ciInvalidClass, !isValid);
            el.toggleClass(attr.ciEmptyClass, false);
          } else { // value in input does not exist
            el.toggleClass(attr.ciValidClass, false);
            el.toggleClass(attr.ciInvalidClass, false);
            el.toggleClass(attr.ciEmptyClass, true);
          }
        });
      }
    }
  }
}]);

Answer 1

你的代码存在很多问题，所以我猜它不完整，指令结构的内容你不能从指令中返回一个值，并期望使用它如何显示而不是我会设置我的元素指令模板（如果你想为每个单独的输入分配类），如下所示：

<input name="email" ng-model="email" check-input ci-empty-class="input-neutral" ci-valid-class="input-valid" ci-invalid-class="input-invalid">

然后在你的指令中根据你添加的attr设置类，即

if(isValid){
   el.addClass(attr.ciInvalidClass);
}else{
   el.addClass(attr.ciValidClass);
}

AngularJS 1.5.2指令，ng-class不改变类

完成的代码

1 个答案: