Question

我对如何在AngularJS中的指令中捕获值感到有点困惑，我有以下代码，它们可以很好地测试输入字段中的2个密码是否相同

[HTML]

<div class="form-group">
                <label for="profileSecret" class="control-label col-sm-4">WPA2 Password:</label>
                <div class="col-sm-6">
                    <input type="password" name="profileSecret" class="form-control" ng-model="profile.secret">
                </div>
              </div>

              <div class="form-group">
                <label for="profileSecret" class="control-label col-sm-4">WPA2 Password (Confirm):</label>
                <div class="col-sm-6">
                    <input type="password" name="profileSecretRepeat" class="form-control" is-valid-psk="profile.secret" ng-model="profile.secretRepeat">
                </div>
              </div>

[工作过的js]

.directive('isValidPsk',function(){//camel case normalize, remember
        return {
            restrict:'A',
            require: 'ngModel',
            link: function(scope, elt, attr, ctrl){
                scope.$watchGroup([attr.isValidPsk,attr.ngModel],function(newVal, oldVal){
                    validate(newVal[0],newVal[1]);
                });

                var validate = function(value1, value2){
                    if (typeof value1 == 'undefined' || typeof value2 == 'undefined'){
                        ctrl.$setValidity('isEqualPwd',false);
                    }
                    else{
                        var res = value1 != '' && value1 == value2 && (value1.length >= 8 && value1.length <= 64);
                        ctrl.$setValidity('isEqualPwd',res);
                    }
                };
            }
        };
    })

上面的代码完全符合我的预期，但我想知道为什么下面的代码没有达到我的预期，attr.ngModel只是给我＆＃34; undefined＆＃34;而不是＆＃34; profile.secretRepeat＆＃34;？

的实际值

[js not work]

.directive('isValidPsk',function(){//camel case normalize, remember
        return {
            restrict:'A',
            require: 'ngModel',
            scope: {
                isValidPsk: '=',
            },
            link: function(scope, elt, attr, ctrl){
                scope.$watchGroup(['isValidPsk',attr.ngModel],function(newVal, oldVal){

                    console.log(newVal[0]);
                    //validate(newVal);
                    console.log(newVal[1]); //>> why this is undefined??
                });

非常感谢所有的帮助！

Answer 1

由于您的第一个指令不包含隔离范围，因此您将在scope.$watchGroup函数内获得两个更新值。但是在您更改代码时，我们在您的指令中隔离了范围，这意味着您当前范围不会从子范围继承。为此，您需要明确指向指令中的parent范围。

<强>代码

scope.$watchGroup(['isValidPsk','$parent.' + attr.ngModel], function(newVal, oldVal) {
    console.log(newVal[0]);
    //validate(newVal);
    console.log(newVal[1]);
});

属性ng模型值在观看时未定义

1 个答案: