Question

任何人都可以解释这个密码匹配是如何工作的吗？我查看了文档但与require:ngModel控制器混淆了。

在脚本中，这三行是什么意思：

var originalModel = $ parse（attrs.valueMatches），
secondModel = $ parse（attrs.ngModel）;
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

Answer 1

在脚本中，这三行是什么意思：

var originalModel = $ parse（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/>

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都是本地的
ngModel。$ setValidity（attrs.name，newValue === secondModel（scope））;

响应：此观察者正在检查attrs.valueMatches的newVal，然后设置与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是获取第一个输入字段的属性还是确认密码输入字段？
响应：再次，它的本地意味着它只是拉动包含属性value-matches的元素的ng模型。指令在valueMessages =＆gt;的视图中翻译value-messages

attrs.name - 我在代码中看不到任何名称属性？
{strong>响应： name="pwd2" <input type="password" class="form-control input-sm glyphicon glyphicon-ok" name="pwd2" ng-model="pwd2" value-matches="pwd" required/>中attrs.name为this.NavigationCacheMode = NavigationCacheMode.Required;。

我希望这会对你有所帮助。指令最初可能非常混乱但坚持下去！他们也非常有用，你会逐渐爱上他们......及时。

Answer 2

require:ngModel表示此自定义指令依赖于此处的另一个指令ng-model。

通常，指令的link函数只按顺序使用三个参数，范围，元素和属性。指定require属性时，指令接受第四个参数，即必需指令的控制器。所以，你收到了ngModelController' here in ngModel`指令。

var originalModel = $parse(attrs.valueMatches)

在这里，我们正在查看第一个输入框的原始模型或ng-model值，并将其存储在originalModel中。

secondModel = $parse(attrs.ngModel);

同样，这里我们正在为第二个模型重新获得价值并存储在secondModel

中

attrs.ngModel个代理人值pwd2，它会将用户输入的值存储在确认密码输入框中。使用$parse，我们从控制器范围中检索此值。

现在，稍后，我们在两个变量上放置$watch，以监控这两个值的变化。

任何给定时间的输入都可以有暂停状态。

$pristine - ＆gt;没有触及输入。

$dirty - ＆gt;用户已更改输入。

$valid - ＆gt;输入包含有效值。

$invalid - ＆gt;输入包含无效值。

有了这条线， ngModel。$ setValidity（attrs.name，newValue === secondModel（scope））;

我们有效地设置验证状态（$valid或$invalid）取决于这两个ng模型值的相等性。

如果两者相同，则结果为真 - ＆gt; $valid 如果结果为假 - ＆gt; $invalid

角度js

2 个答案: