使用angular ui工具提示动态更改工具提示类

Question

我正在尝试在针对角度ui工具提示的模型更改中更改自定义类。

这就是我想要实现的

• 如果在文本框中未输入任何内容（当我关注时），则应将默认工具提示显示为“必填”
• 如果我写了一些东西（改变了模型的值），那么它应该用新的customClass改变工具提示文本

在我当前的实现中，它会更改文本，但是customClass仅在我模糊并再次专注于文本框时才应用。

我了解重新渲染工具提示时，它将获得模型的新值并应用customClass

但是在这种情况下，如何在模型更改时调用tooltip的recreate方法来重新呈现它？

这是代码http://plnkr.co/edit/Q4j2372DOcQkrL3Dv0bi?p=preview

Answer 1

您可以始终以编程方式强制刷新。 将$timeout ^*）添加到控制器并实现如下功能：

app.controller('MainCtrl', ['$scope', '$timeout', function($scope, $timeout) {
  $scope.emailValue = '';

  $scope.evalToolTip = function() {
    var email = document.getElementById('email');
    $timeout(function() {
        email.blur();    
        email.focus();
    })
  }   

}]);

添加一个ng-keydown来触发上述evalToolTip()函数：

<input ng-keydown="evalToolTip()" id="email" name="email" type="text" ng-model="emailValue" tooltip="{{ emailValue === ''? 'required': 'pattern error'}}" tooltip-trigger="focus" tooltip-placement="bottom" class="form-control" tooltip-append-to-body="true" tooltip-class="{{ emailValue === ''? '': 'customClass'}}" />

分叉的plnkr-> http://plnkr.co/edit/Axsw8poJDrNaWw20ilxQ?p=preview

*）如果没有$timeout我们有同时发生错误的风险。