2015-06-24 2 views
0

Может ли кто-нибудь объяснить, как работает этот пароль? Я просмотрел документы, но смутился с контроллером require:ngModel.Проверка соответствия паролей в угловых js

Внутри сценария, чем эти три линии означают:

  1. вар originalModel = $ синтаксического анализа (attrs.valueMatches),
  2. secondModel = $ синтаксического анализа (attrs.ngModel);
  3. ngModel. $ SetValidity (attrs.name, newValue === secondModel (scope));

Это attrs.ngModel здесь, ссылаясь на контроллер ngModel или на директиву?

Есть attrs.ngModel выбор атрибутов первого поля ввода или подтверждение ввода пароля?

attrs.name - Я не вижу никакого атрибута name в коде.

<!DOCTYPE html> 
<html ng-app="myApp" > 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
     <link rel="stylesheet" href="style.css" /> 

     <script> 
      "use strict"; 
      var app = angular.module('myApp', []) 

      app.directive('valueMatches', ['$parse', function ($parse) { 
        return { 
         require: 'ngModel', 
         link: function (scope, elm, attrs, ngModel) { 
          var originalModel = $parse(attrs.valueMatches), 
            secondModel = $parse(attrs.ngModel); 
          // Watch for changes to this input 
          scope.$watch(attrs.ngModel, function (newValue) { 
           ngModel.$setValidity(attrs.name, newValue === originalModel(scope)); 
          }); 
          // Watch for changes to the value-matches model's value 
          scope.$watch(attrs.valueMatches, function (newValue) { 
           ngModel.$setValidity(attrs.name, newValue === secondModel(scope)); 
          }); 
         } 
        }; 
       }]); 
     </script> 

     <title>Registration Form</title> 
    </head> 
    <body> 
     <div class="container"> 
      <h2 class="text-muted">Registration form</h2> 
      <div> 
       <form name="myForm" action="RegistrationServlet.do" method="POST" novalidate> 
        First name:<input type="text" class="form-control input-sm" name="uname" ng-pattern="/^[a-zA-Z]{3,20}/" ng-model="uname" placeholder="First Name" required/> 

        Password:<input type="password" class="form-control input-sm glyphicon glyphicon-ok" name="pwd" ng-model="pwd" required /> 

        Confirm Password: <input type="password" class="form-control input-sm glyphicon glyphicon-ok" name="pwd2" ng-model="pwd2" value-matches="pwd" required/> 
        <span class="help-block" style="color:red" ng-show="myForm.pwd2.$dirty && myForm.pwd2.$invalid">Passwords did not match<br></span><br> 
       </form> 
      </div> 
     </div>    
    </body> 
</html> 

http://plnkr.co/edit/zCxRp71SICuYp1JDm3pY?p=preview

ответ

0

Внутри сценария, чем эти три линии означают:

  1. вар originalModel = $ синтаксического анализа (attrs.valueMatches),
    Ответ: это принимает значение от value-matches="pwd" в <input type="password" class="form-control input-sm glyphicon glyphicon-ok" name="pwd2" ng-model="pwd2" value-matches="pwd" required/>
  2. secondModel = $ parse (attrs.ngModel);
    Реакция: Это занимает долину ng-model в том же <input type="password" class="form-control input-sm glyphicon glyphicon-ok" name="pwd2" ng-model="pwd2" value-matches="pwd" required/>. все ngModel годов и ATTRS в директивах локальны
  3. ngModel $ setValidity (attrs.name, новое_значение === secondModel (сфера)).
    Ответ: Этот наблюдатель проверяет newVal из attrs.valueMatches и затем установить справедливость любой формы-контроля с тем же именем, как attrs.name (по существу проверки себя в этом случае, так как его единственной формой-контроля в директиве). Достоверность определяется логическое сравнение между ng-model и value-matches в <input type="password" class="form-control input-sm glyphicon glyphicon-ok" name="pwd2" ng-model="pwd2" value-matches="pwd" required/>

    attrs.ngModel означает, что она говорит о контроллере ngModel или директивы?
    Ответ: Как и указано выше, директивы используются для создания изолированных областей, поэтому, если в директиве не включен контроллер, каждая вещь будет содержаться локально в директиве.

Также attrs.ngModel извлекает атрибуты первого поля ввода или подтверждает ввод пароля ввода?
Ответ: Выше, его местный, что означает его единственное вытягивание ng-модели элемента, содержащего атрибут value-matches.Директивы переведены с точки зрения от valueMessages =>value-messages

attrs.name - Я не вижу в коде никакого атрибута имени?
Отклик: : attrs.name.

Надеюсь, это вам поможет. Директивы могут быть ОЧЕНЬ СОХРАНЕНИЕ сначала, но придерживайтесь его! Они также ЧРЕЗВЫЧАЙНО ПОЛЕЗНО, и вы будете любить их ... вовремя.

+0

Я не понимаю, когда вы сказали «все ngModel-х и ATTRS в директивах являются локальными» –

+0

'ATTRS. name' вот имя правителя валидатора? Поэтому я могу дать любое имя вместо 'attrs.name'? –

+0

То, что я имел в виду под локальным, - это когда-либо элемент (в этом случае '', который определен с помощью директивы (в этом случае используется атрибут 'value-matches =' генерирует новую уникальную область выделения, уникальную для себя. Таким образом, единственная ngModel it ссылка ссылается на то, что связано с самим собой. Причина, по которой вам нужно: ngModel для прямого ввода, так что вы можете наследовать все угловые функциональные возможности, связанные с ngModel. –

0

require:ngModel означает, что эта настраиваемая директива зависит от другой директивы ng-model здесь.

Как правило, функция ссылки директивы принимает только три параметра, область действия, элемент и атрибуты в том же порядке. Когда вы укажете свойство require, директива принимает четвертый параметр, контроллер требуемой директивы. Итак, вы получили ngModelController' here in ngModel` директивы.

var originalModel = $parse(attrs.valueMatches) 

Здесь мы retieving исходной модели или нг-модель значения первого ввода и сохранения его в originalModel.

secondModel = $parse(attrs.ngModel); 

Кроме того, здесь мы retriving значения для второй модели и хранение в secondModel

attrs.ngModel reprsents значения pwd2, которая будет хранить значение, введенное пользователем в поле ввода подтверждения пароля. И используя $parse, мы извлекаем это значение из области контроллера.

Теперь мы поместили $watch на обе переменные, чтобы отслеживать изменения обоих значений.

Ввод в любой момент времени может иметь состояние покоя.

$pristine -> Вход не был тронут.

$dirty -> Пользователь изменил ввод.

$valid -> Ввод содержит допустимое значение.

$invalid -> Ввод содержит недопустимое значение.

С этой строкой ngModel. $ SetValidity (attrs.name, newValue === secondModel (scope));

Мы эффективно устанавливаем состояние проверки ($valid или $invalid) в зависимости от равенства этих двух значений модели ng.

Если оба одинаковы, результат будет верным ->$valid И если результат, если ложно ->$invalid

+0

Некоторые люди звонят четвертый атрибут differenty Пример: 'link: function (scope, elm, attrs, ctrl)' или может быть 'link: function (scope, elm, attrs, model)'. Не имеет значения, как мы называем контроллер? мы бы знали, если мы звоним g, если мы используем разные имена –

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