Question

好的，所以我有一个输入字段，我想通过2个自定义指令来增强：

<input type="text" number-format validation-message="Only numeric values are valid!" class="form-control" id="num1" ng-model="num1" />

第一个指令验证输入文本时的任何输入 - ＆gt;在这种情况下，我用正则表达式检查数字:(这实际上工作正常）

.directive('numberFormat', function() {
return {
    require: 'ngModel',
    link: function(scope, element, attrs, ctrl) {
        ctrl.$parsers.unshift(function (viewValue) {
            var invalidNumber = /^[0-9]+$/.test(viewValue);
            if (invalidNumber || viewValue === ''){
              ctrl.$setValidity('numberFormat', true);
            } else {
              ctrl.$setValidity('numberFormat', false);
            }
        });
    }
};})

然后，我认为显示工具提示可能有用，说明只有数字对此输入字段有效。我想在验证失败的那一刻展示它。到目前为止我的第二个指令看起来像这样：

.directive('validationMessage', function () { 
return{
    restrict: 'A',
    template: '<input tooltip tooltip-placement="bottom" >',
    replace: true,
    require: 'ngModel',
    link: function (scope, element, attrs, ctrl) {

      ctrl.$parsers.unshift(function(viewValue) {
        var valid = ctrl.$valid;
        if (valid) {
          attrs.$set('tooltip', "");
        } else {
          attrs.$set('tooltip', attrs.validationMessage);
          scope.tt_isOpen = true; // doesn't work!?
        }
        return viewValue;
      });
    }
};})

嗯，基本上它确实起作用，工具提示和工具提示放置属性更新到输入元素。但由于某种原因，当有效性失败时，工具提示不会立即显示（并且设置了工具提示属性及其文本）。用户需要通过鼠标将鼠标悬停在输入元素中以查看工具提示。

我已经创建了一个plunker，可以更好地显示此行为：http://plnkr.co/edit/3QOiOom6VQm3cXAstB3j?p=info

我试过'scope.tt_isOpen'，但它似乎没有任何效果。我错过了什么来展示工具提示？

非常感谢每一个提示。

Answer 1

您可以使用：

tooltip-trigger="{{{true: 'keyup', false:'never'[myForm.inputName.$invalid]}}"

UI Bootstrap使用所谓的triggerMap来确定显示/隐藏工具提示的鼠标事件。

// Default hide triggers for each show trigger
var triggerMap = {
'mouseenter': 'mouseleave',
'click': 'click',
'focus': 'blur'
};

app.config(['$tooltipProvider', function($tooltipProvider){
$tooltipProvider.setTriggers({
'mouseenter': 'mouseleave',
'click': 'click',
'focus': 'blur',
'keyup': 'keydown',
'never': 'mouseleave' <- to make sure tooltip will go
});
}]);

您可以指定所需的事件来触发工具提示。

angular-ui：当输入字段有效性变为无效时，使用指令显示工具提示

1 个答案: