Сравните два поля в директиве angularjs

Я пытаюсь создать директиву, которая может использоваться для сравнения двух полей в нескольких проектах.Сравните два поля в директиве angularjs

разметка:

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

источник

2015-01-21 Strangera

Это может помочь вам!

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

источник

2015-01-21 09:08:47

Во-первых, избегать использования «нг» в качестве префикса для пользовательской директивы, так как это может столкнуться с любым будущим директивам Угловая решили добавить в будущем.

Сравните с нг-модели вместо имени поля в 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(); 
     }); 
    } 

}});

источник

2015-01-21 09:11:54 rwacarter

Проблема с ответами, которые были даны до сих пор, заключается в том, что все они создают область изоляции. Это означает, что вы не можете использовать дополнительные директивы на одном и том же вводе или в другой директиве.

Это может быть исправлено путем модификации выше следующим образом:

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

источник

2016-01-27 22:03:37 luvaas

спасибо. Именно то, что я искал. В большинстве случаев нет необходимости создавать изолированную область, особенно для ограничения, которое вы указали –

Сравните два поля в директиве angularjs

ответ

Смежные вопросы