Question

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

MarkUp：

<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.i的价值，我在主应用程序中包含这个指向“app.directive.ngCompare”。是因为我没有得到密码的价值。

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

Answer 1

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

可以通过修改以上内容来修复：

.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();
            });
        }
    };
});

Answer 2

它可能对你有所帮助!!

<!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>

Answer 3

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

与ng-model而不是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();
        });
    }

}});

比较angularjs指令中的两个字段

3 个答案: