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

Question

我正在尝试为 Angular ui 工具提示更改模型更改的自定义类。

这就是我想要达到的目标

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

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

我明白当它重新渲染工具提示时，它会获取模型的新值并应用customClass

但在这种情况下，如何调用工具提示的重新创建方法以在模型更改时重新渲染它？

这里是代码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();
    })
  }   

}]);

添加触发上述evalToolTip()函数的ng-keydown：

<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，我们就有同时出错的风险。