UI Bootstrap - 如何在关闭前停止工具提示显示更改的文本

Question

我有一个处理字形图标的工具提示。当我点击字形图标时，我想隐藏工具提示，然后更改工具提示的文本。这反映了已单击的字形图标的状态变化。

但是，当我隐藏工具提示然后更改工具提示的文本时，而不是按此顺序进行操作时，您可以在工具提示消失之前看到一秒钟的新文本。

这里是 html:

<span class="glyphicon glyphicon-eye-open watch-eye"
    ng-click="eyeClicked()" uib-tooltip="{{watchTooltip}}"
    tooltip-placement="auto top" tooltip-is-open="eyeTooltipIsOpen">
</span>

这里是 javascript:

$scope.watchingCategory = false;
$scope.watchTooltip = 'Watch';

$scope.eyeClicked = function() {

    $scope.eyeTooltipIsOpen = !$scope.eyeTooltipIsOpen;
    $scope.watchingCategory = !$scope.watchingCategory;

    if($scope.watchingCategory === true) {
        $scope.watchTooltip = 'Dont watch';
    }
    else if($scope.watchingCategory === false) {
        $scope.watchTooltip = 'Watch';
    }
};

我创建了一个 plnkr 来准确展示它是如何工作的：http://plnkr.co/edit/myQlkkiSNO14td21Dv0M

有什么办法可以阻止这种行为吗？感谢所有帮助...

Answer 1

这可能是 uib 指令的问题。

超时解决问题：

 $timeout(function(){
        $scope.watchTooltip = $scope.watchingCategory ?  'Dont watch' : 'Watch';
    }, 200);

http://plnkr.co/edit/myQlkkiSNO14td21Dv0M?p=preview

UI Bootstrap - 如何在关闭前停止工具提示显示更改的文本

UI Bootstrap - how to stop tooltip showing changed text before closing

angularjs

angular-ui-bootstrap