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

Question

我正在尝试更改 angular ui 工具提示的模型更改自定义 class。

这就是我想要实现的目标

如果在文本框中没有输入任何内容，（当我聚焦时）那么它应该显示默认工具提示 "required"
如果我写了一些东西（改变模型的值），那么它应该用新的customClass

在我当前的实现中，它会更改文本，但 customClass 只有在我模糊并再次聚焦在文本框上时才会应用。

我明白当它重新呈现工具提示时，它会选择模型的新值并应用 customClass

但在这种情况下，如何调用工具提示的 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，我们将面临同时性错误的风险。

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

change tooltip class dynamically with angular ui tooltip

javascript

angularjs

tooltip

angular-ui

angular-ui-bootstrap