【问题标题】：Passing Information to Directive to Match Passwords将信息传递给指令以匹配密码
【发布时间】：2017-08-11 12:06:51
【问题描述】：

当我的控制器中满足某些条件时，我正在尝试向浮动占位符标签添加错误

但是，我不确定解决此问题的最佳方法，并且我当前的实现似乎没有检测到指令中的属性更改（自定义错误保持设置为“测试”）。

这是我现在得到的：

HTML：

<input type="password" float-placeholder
       custom-error="test" placeholder="Confirm password"
       required name="passwordSecond" id="passwordSecond"
       ng-model="vs.PasswordSecond" />

指令：

angular.module('myApp').directive('floatPlaceholder', function ($window) {
  return {
    restrict: 'A',
    scope: {
      customError: '@'
    },
    link: function (scope, element, attrs) {
      element.after("<label class='floating-placeholder'>" + attrs.placeholder + "</label>");
      var label = angular.element(ele.parent()[0].getElementsByClassName('floating-placeholder'));

      element.on('blur', function() {
        if (ele.val().length > 0) { 
          if (scope.customError) {
            label.text(attrs.placeholder + ' - ' + scope.customError);
          }
        }
      }
    }
  };
});

控制器：

angular.module('myApp').controller('SignupController', function factory() {
  _this.confirmPassword = () => {
    if(_this.PasswordFirst !== _this.PasswordSecond){
      angular.element(signupForm.passwordSecond).attr('custom-error', _this.Error);
    }
  }
});

我正在使用 Angular 1.6

【问题讨论】：

代码是位的，请提供一个突出问题的工作演示。我正在尝试重新创建，但缺少一些变量

标签： angularjs angularjs-directive angularjs-ng-model angularjs-ng-form

【解决方案1】：

匹配密码的验证器指令

要让form 匹配密码输入，请创建一个与ngModelController API ($validators) 挂钩的custom directive：

app.directive("matchWith", function() {
  return {
    require: "ngModel",
    link: postLink
  };
  function postLink(scope,elem,attrs,ngModel) {
    ngModel.$validators.match = function(modelValue, viewValue) {
        if (ngModel.$isEmpty(modelValue)) {
          // consider empty models to be valid
          return true;
        }
        var matchValue = scope.$eval(attrs.matchWith);
        if (matchValue == modelValue) {
          // it is valid
          return true;
        }
        // it is invalid
        return false;
    };
  }
})

欲了解更多信息，请参阅AngularJS Developer Guide - Forms - Modifying Built-in Validators

The DEMO

angular.module("app",[])
.directive("matchWith", function() {
  return {
    require: "ngModel",
    link: postLink
  };
  function postLink(scope,elem,attrs,ngModel) {
    ngModel.$validators.match = function(modelValue, viewValue) {
        if (ngModel.$isEmpty(modelValue)) {
          // consider empty models to be valid
          return true;
        }
        var matchValue = scope.$eval(attrs.matchWith);
        if (matchValue == modelValue) {
          // it is valid
          return true;
        }
        // it is invalid
        return false;
    };
  }
})

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app">
    <form name="form1">
        <input type="password" name="password1" required
               placeholder="Enter password"
               ng-model="vm.password1" />
        <br>
        <input type="password" name="password2" required
               placeholder="Confirm password"
               ng-model="vm.password2"
               match-with="vm.password1"
               ng-model-options="{updateOn: 'blur'}" />
        <br>
        <p ng-show="form1.password2.$error.match">
          Passwords don't match
        </p>
        <input type="submit" value="submit" />
    </form>
  </body>

【讨论】：

【解决方案2】：

查看了您的代码。您是否在 SignUpController 中定义了范围变量

_this.PasswordFirst 和 _this.PasswordSecond

你的控制器中也有这一行

angular.element(signupForm.passwordSecond).attr('custom-error', _this.Error);

好的建议是在指令中实现这一点，因为可以在指令中正确访问属性

【讨论】：

【解决方案3】：

（我是根据你说的“自定义错误保持设置为“测试””）

custom-error 正在寻找“test”的变量，而不是“test”的字符串值。您是否尝试过在控制器中设置变量测试并对其进行更新？

【讨论】：