angularjs - Angular 用户界面 : Show tooltip using directive when an input fields validity turns invalid

Question

好的，我有一个输入字段，我想用 2 个自定义指令来增强它:

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

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

.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
});
}]);

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