javascript - AngularJS 无法让我的匹配(两个字段)指令工作

Question

以下指令基于 this question 中的代码，我正在使用 Angular 1.2.27。我的问题是，无论出于何种原因，它都不会验证为真，因为它永远不会比 if (!viewValue || !comparisonModel) { 更进一步，因为 viewValue 始终未定义.

考虑到另一个问题基本上与比较整数相同，我想我在这里遗漏或做错了一些非常愚蠢的事情。

那么，为什么 viewValue 未定义，我该如何让它按预期工作？ Plunker is here.

'use strict';
var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
  $scope.fields = {
    password: '',
    password2: ''
  };

});

app.directive('waMatch', [
    function () {
        var link = function ($scope, $element, $attrs, ctrl) {

            var validate = function (viewValue) {
                var comparisonModel = $attrs.waMatch;

                if (!viewValue || !comparisonModel) {
                    ctrl.$setValidity('waMatch', true);
                }

                ctrl.$setValidity('waMatch', (viewValue === comparisonModel));
                return viewValue;
            };

            ctrl.$parsers.unshift(validate);
            ctrl.$formatters.push(validate);

            $attrs.$observe('waMatch', function (comparisonModel) {
                return validate(ctrl.$viewValue);
            });

        };

        return {
            require: 'ngModel',
            link: link
        };
    }
]);

HTML:

  Password: <input name="password" type="password" required ng-model="fields.password" />
  <span class="error" ng-show="form.password.$error.required && !form.password.$pristine">
    Required.
  </span>

  <br />

  Password2: <input name="password2" type="password" required ng-model="fields.password2" wa-match="{{password}}"/>
  <span class="error" ng-show="form.password2.$error.waMatch">
    Passwords must match.
  </span>

Answer 1

这是一个小错字......

wa-匹配="{{密码}}"

应该是:

wa-match="{{fields.password}}"

所以 html 应该是:

Password2: <input name="password2" type="password" required ng-model="fields.password2" wa-match="{{fields.password}}"/>