javascript - 使用 Angular 用户界面工具提示动态更改工具提示类

Question

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

这就是我想要实现的目标

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

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

我知道当它重新呈现工具提示时，它会获取模型的新值并应用 customClass

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

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

Answer 1

您始终可以通过编程强制刷新。将 $timeout ^*) 添加到 Controller 并实现如下功能:

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'}}" />

forked plnkr -> http://plnkr.co/edit/Axsw8poJDrNaWw20ilxQ?p=preview

*) 如果没有 $timeout，我们将面临同时性错误的风险。