比较 angularjs 指令中的两个字段

Compare two fields in angularjs directive

本文关键字：两个 字段 angularjs 指令 比较      更新时间：2023-09-26

我正在尝试创建可用于比较多个项目中两个字段的指令。

标记：

<div class="form-group">
<input  ng-model="user.password"  type="password" name="password"  />
</div>
<div class="form-group">
<input  ng-model="user.confpassword" ng-compare="password" name="confpassword" type="password"  />
<p ng-show="registrationform.password.$error.ngcompare" class="help-block">Password's don't match</p>

命令：

 "use strict";
 angular.module('app.directive.ngCompare', []).directive('ngCompare', function () {
return {
    require: 'ngModel',
    link: function (scope, element, attrs, ngModelController)
    {
           ngModelController.$parsers.unshift(function (viewvalue) {
            console.log(scope); // doesnot contain password field object
            console.log(viewvalue); // gives me value of confpassword field
            console.log(scope[attrs.ngCompare]); // undefined
        });

    }
}});
我

还没有完成编写我的指令，但是，在开发过程中，当我控制台范围时，我没有得到第一个密码的值，但我得到了 confpassword 的值.我在我的主应用程序中将此引用作为"app.directive.ngCompare"包含在我的主要应用程序中。是因为我不知道密码值吗？

我正在使用角度版本 1.3.9。我知道那里有很多类似的指令，但我需要一步一步地弄清楚它们是如何运行的，所以从头开始创建。有没有其他方法可以使用angularjs技术而不是jquery方法获取密码值。

到目前为止给出的答案的问题在于它们都创建了一个隔离范围。 这意味着您不能对同一输入或其他指令使用其他指令。

可以通过修改上述内容来解决此问题，如下所示：

.directive("compareTo", function() {
    return {
        require: "ngModel",
        link: function(scope, element, attrs, ctrl) {
            ctrl.$validators.compareTo = function(val) {
                return val == scope.$eval(attrs.compareTo);
            };
            scope.$watch(attrs.compareTo, function() {
                ctrl.$validate();
            });
        }
    };
});

它可能会帮助你！！

<!DOCTYPE html>
<html ng-app="app">
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
  <script src="https://code.angularjs.org/1.3.0-rc.2/angular.js"></script>
  <style>
    .ng-invalid {
      border-color: red;
      outline-color: red;
    }
    .ng-valid {
      border-color: green;
      outline-color: green;
    }
  </style>
  <script>
    var app = angular.module("app", []);
    app.controller("confirmCtrl", function($scope) {
      $scope.user = {
        password: "",
        confirmPassword: ""
      };
    });
    app.directive("compareTo", function() {
      return {
        require: "ngModel",
        scope: {
          confirmPassword: "=compareTo"
        },
        link: function(scope, element, attributes, modelVal) {
          modelVal.$validators.compareTo = function(val) {
            return val == scope.confirmPassword;
          };
          scope.$watch("confirmPassword", function() {
            modelVal.$validate();
          });
        }
      };
    });
  </script>
</head>
<body ng-controller="confirmCtrl">
  <form>
  <lable></lable>
    <div>
      <label>Password</label>
      <input type="password" name="pwd" ng-model="user.password" required class="form-control"/>
    </div>
    <div>
      <label>Confirm Password</label>
      <input type="password" name="confirmPassword"  ng-model="user.confirmPassword" required compare-to="user.password" class="form-control"/>
    </div>
  </form>
</body>
</html>

首先，避免使用"ng"作为自定义指令的前缀，因为这可能会与 angular 决定在未来添加的任何未来指令发生冲突。

与 ng 模型而不是 HTML 中的字段名称进行比较：

<input ng-model="user.confpassword" ss-compare="user.password" name="confpassword" type="password"  />

然后为指令添加新的作用域，在其中传入密码：

return {
    require: 'ngModel',
    scope: {
        ssCompare: '='
    },
    link: function (scope, element, attrs, ngModelController)
    {
        ngModelController.$validators.compareTo = function(modelValue) {
            return modelValue == scope.ssCompare;
        };
        scope.$watch("ssCompare", function() {
            ngModelController.$validate();
        });
    }
}});
相关文章：