最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Compare two fields in angularjs directive - Stack Overflow

programmeradmin2浏览0评论

I am trying to create directive which can be used to pare two fields in multiple projects.

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-pare="password" name="confpassword" type="password"  />
<p ng-show="registrationform.password.$error.ngpare" class="help-block">Password's don't match</p>

Directive :

 "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
        });


    }

}});

I have not pleted writing my directive but , during development when i console scope i dont get value of first password but i get value of confpassword.i am including this direcitive in my main app as 'app.directive.ngCompare'.Is it because of that i dont get value of password.

I am using angular version 1.3.9. I know there are many similar directives out there but i need to figure out step by step how they run so started creating from scratch.Is there any other way to get value of password using angularjs techiques rather than jquery methods.

I am trying to create directive which can be used to pare two fields in multiple projects.

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-pare="password" name="confpassword" type="password"  />
<p ng-show="registrationform.password.$error.ngpare" class="help-block">Password's don't match</p>

Directive :

 "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
        });


    }

}});

I have not pleted writing my directive but , during development when i console scope i dont get value of first password but i get value of confpassword.i am including this direcitive in my main app as 'app.directive.ngCompare'.Is it because of that i dont get value of password.

I am using angular version 1.3.9. I know there are many similar directives out there but i need to figure out step by step how they run so started creating from scratch.Is there any other way to get value of password using angularjs techiques rather than jquery methods.

Share Improve this question asked Jan 21, 2015 at 8:59 StrangeraStrangera 511 silver badge6 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 4

The problem with the answers given so far is that they all create an isolate scope. This means you couldn't use additional directives on the same input or on another directive.

That can be fixed by modifying the above as follows:

.directive("pareTo", function() {
    return {
        require: "ngModel",
        link: function(scope, element, attrs, ctrl) {

            ctrl.$validators.pareTo = function(val) {
                return val == scope.$eval(attrs.pareTo);
            };

            scope.$watch(attrs.pareTo, function() {
                ctrl.$validate();
            });
        }
    };
});

It might help you!!

<!DOCTYPE html>
<html ng-app="app">

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.2.0/css/bootstrap.css" />
  <script src="https://code.angularjs/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("pareTo", function() {
      return {
        require: "ngModel",
        scope: {
          confirmPassword: "=pareTo"
        },
        link: function(scope, element, attributes, modelVal) {

          modelVal.$validators.pareTo = 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 pare-to="user.password" class="form-control"/>
    </div>
  </form>
</body>

</html>

Firstly, avoid using 'ng' as a prefix for a custom directive, as this could clash with any future directives angular decide to add in the future.

Compare to the ng-model instead of the field name in the HTML:

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

Then add a new scope for the directive, in which you pass in the password:

return {
    require: 'ngModel',
    scope: {
        ssCompare: '='
    },
    link: function (scope, element, attrs, ngModelController)
    {
        ngModelController.$validators.pareTo = function(modelValue) {
            return modelValue == scope.ssCompare;
        };

        scope.$watch("ssCompare", function() {
            ngModelController.$validate();
        });
    }

}});
发布评论

评论列表(0)

  1. 暂无评论