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

Question

我正在尝试更改角度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(); 
    }) 
    } 

}]); 

添加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我们存在同时性错误的风险。