比较 angularjs 指令中的两个字段 [英] Compare two fields in angularjs directive

问题描述

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

标记:

<input ng-model="user.password" type="password" name="password"/>
<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">密码不匹配</p>

指令:

 "使用严格";angular.module('app.directive.ngCompare', []).directive('ngCompare', function () {返回 {要求:'ngModel'，链接:函数(范围、元素、属性、ngModelController){ngModelController.$parsers.unshift(function (viewvalue) {控制台日志(范围)；//不包含密码字段对象控制台日志(视图值)；//给我 confpassword 字段的值控制台日志(范围[attrs.ngCompare])；//不明确的});}}});

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

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

解决方案

到目前为止给出的答案的问题是它们都创建了一个隔离作用域.这意味着你不能在同一个输入或另一个指令上使用额外的指令.

可以通过如下修改来修复:

.directive("compareTo", function() {返回 {要求:ngModel"，链接:函数(范围，元素，属性，ctrl){ctrl.$validators.compareTo = function(val) {返回 val == scope.$eval(attrs.compareTo);};scope.$watch(attrs.compareTo, function() {ctrl.$validate();});}};});

I am trying to create directive which can be used to compare 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-compare="password" name="confpassword" type="password"  />
<p ng-show="registrationform.password.$error.ngcompare" 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 completed 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.

解决方案

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

这篇关于比较 angularjs 指令中的两个字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！