Question

这可能是一个愚蠢的问题，我可能不会很好地解释自己，但是这里...我有一个包含当前HTML标签的表单，请注意指令：

<input type="password" name="password1" id="password1" ng-model="user.plaintextPassword" equals="{{user.password2}}" required ng-trim="false" error-popover>
<label for="password1">Password 1</label>

<input type="password" name="password2" id="password2" ng-model="user.password2" equals="{{user.plaintextPassword}}" required ng-trim="false" error-popover >
<label for="password2">Password 2</label>

现在在这两个标签上我都有AngularJS指令。 equals指令监视密码的两个值，如果匹配/不匹配则设置模型的有效性，如下所示：

   .directive('equals', function() {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function(scope, elm, attrs, ngModel) {
                if(!ngModel) {
                    return;    // do nothing if no ng-model
                }

                // watch own value and re-validate on change
                scope.$watch(attrs.ngModel, function() {
                    validate();
                });

                // observe the other value and re-validate on change
                attrs.$observe('equals', function () {
                    validate();
                });

                var validate = function() {
                    // values
                    var val1 = ngModel.$viewValue;
                    var val2 = attrs.equals;

                    // set validity
                    ngModel.$setValidity('equals', val1 === val2);
                    //console.log(ngModel);
                };
            }
        }

现在我有另一个指令，如果表单项无效，会生成验证弹出窗口，这会在表单项的keydown或焦点上触发（这是一个已编辑的版本）：

   .directive('errorPopover', function() {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function(scope, element, attrs, ngModel) {

                // validate on keydown and focus in input field
                element.on('keydown focus', function() {
                    scope.$evalAsync(function() {

                        var popoverOptions = {
                            'placement': (attrs.errorPopover) ? attrs.errorPopover : 'left',
                            'trigger': 'manual',
                            'content': setValidationText(attrs, ngModel)
                        };

                        // raise the error etc...
                    });
                });


                // hide popover when user leaves input
                element.on('blur', function() {
                    // do stuff
                });

                var setValidationText = function(attrs, ngModel) {
                    var errorText = '';

                    // lots going on here... and then
                    if(attrs.equals && ngModel.$error.equals === false) {
                        // add to the error text
                    }

                    return errorText;
                };
            }
        };

现在这不起作用，因为ngModel不同，而equals指令保持正确的有效值，errorPopover指令不会。因此该值可能为false，但在errorPopover指令中，ngModel.$error.equals始终为true。如何使用errorPopover指令确定的正确值更新equals指令？

请注意：我正在建议或推动正确的方向而不是代码示例...因为我不确定这是关于隔离范围或广播等等......

Answer 1

我认为你这太复杂了。指令主要用于DOM操作。在你的equals指令中，你只是在做数据验证，所以控制器功能会更好。

你可以删除你的'equals'自定义指令，代替它在两个输入上添加ng-change =“validatePassword（）”（如果包含其他验证，你可能还希望在提交表单时调用此函数密码强度测试等逻辑。然后，这是一个简单的函数比较检查问题，如果两个变量不匹配，那么显示你的popover。

你的popover似乎也太复杂了。我会尝试将HTML保留在HTML文件中，然后只需控制控制器功能中的显示/隐藏（或使用ng-if）。我会将你在popover中的任何相关逻辑移动到验证函数，或者如果它可以在不同类型的验证中重用，则可能在单独的函数中移动。因此，如果验证函数为true或false，则最终只显示/隐藏HTML的一部分。这是一个易于遵循的模式，可以将HTML保持在一起。

希望这能让你向更简单的方向发送。

更新AngularJS中指令之间的数据/状态

1 个答案: