Question

我正在尝试实现一个解决方案，该解决方案允许以工具提示（如果有）的形式显示鼠标所在字段的违规列表。我想使用data-tooltip-html-unsafe（工具提示的派生，它正确显示html内容）。当然我更喜欢使用像 tooltip-validated 这样的单一指令，它会将所有必要的指令应用到这样的元素（如data-tooltip-html-unsafe）以及所需的任何逻辑（例如翻译等）。我设法通过以下代码实现了我的目标，但是有一个非常难以跟踪的错误。

这是指令：

'use strict';

angular.module('example.common.directives')
    .directive('tooltipValidated', ['$translate', '$timeout', '$compile', function ($translate, $timeout, $compile) {

        function parseMessage(prefix, errors) {
            // skipped some logic here
            return 'parsed message';
        }

        return {
            restrict: 'A',
            require: 'ngModel',
            replace: true,
            link: function($scope, $element, $attributes, $ctrl) {
                $attributes.$set('data-tooltip-html-unsafe', "{{errorMessage}}");
                $attributes.$set('tooltip-trigger', "{{{true: 'mouseenter', false: 'never'}[memberForm.secondaryContact.$invalid]}}");
                $scope.$watch(function() {
                    return $ctrl.$valid;
                }, function(newValue) {
                    if(newValue) {

                    } else if($ctrl.$dirty) {
                        var errorMap = $ctrl.$error;
                        var prefix = $attributes.errorPrefix;
                        var message = parseMessage(prefix, errorMap);
                        $timeout(function() {
                            $scope.errorMessage = message;
                        });

                    }
                });
                $timeout(function() {
                    $element.removeAttr("tooltip-validated");
                    $compile($element)($scope); // this is what seems to cause the bug
                });
            }
        }
    }]);

以下是我如何使用它：

<input type="email"
                       name="secondaryContact"
                       ng-model="member.secondaryContact"
                       ng-disabled="!editable"
                       class="g-input-text g-float-left"
                       ng-class="inputClass"
                       required
                       tooltip-validated
                       error-prefix="MEMBER_FORM.SECONDARY_CONTACT"
                       maxlength="30"/>

问题是当验证状态发生变化时（从无效到有效，有效到无效），输入都会被清除。如果

，就不会发生这种情况

$compile($element)($scope);

已删除，但工具提示未呈现。为什么这条线引起了这样的问题以及如何解决这个问题呢？我做错了吗？

我的解决方案基于this和this

谢谢！

为什么在Angular中更改验证状态时编译会清除输入？

0 个答案: