Question

我正在尝试在一个页面中创建3个工具提示，它不起作用，只有一个工具提示应该打开点击任何其他工具提示应该关闭。

 angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TooltipDemoCtrl', function ($scope, $sce) {
$scope.tooltip = {
            1: false,
            2: false,
            3: false
        };

$scope.tooltipCloseActive = function(activeTooltip) {
            console.log($scope.tooltip);

            _.set($scope.tooltip, activeTooltip, true);
            _.forOwn($scope.tooltip, function(value, key) {
                console.log(value+'*************'+key);
                if(activeTooltip !== key && value === true){
                    console.log('#'+key);
                    _.set($scope.tooltip, key, false);
                    $scope.triggerClickOnTooltip(key);
                    console.log(key);
                }
            });
        };

        $scope.triggerClickOnTooltip = function(id) {
            setTimeout( function(){

                angular.element(document.querySelectorAll('#'+id)).trigger('click');
            }, 100);
        };


});

HTML：

<div class="col-xs-10 col-sm-4">

                <p id="1" tooltip-trigger="click"
                   uib-tooltip="I am a tooltip 1." ng-click="tooltipCloseActive('1');">

                    <span>tooltip 1:</span>
                </p>
         <br>
                <p id="2"   tooltip-trigger="click"
                   uib-tooltip="I am a tooltip 2." ng-click="tooltipCloseActive('2')">

                    <span >tooltip 2:</span>
                </p>
        <br>
                <p id="3" tooltip-trigger="click"
                   uib-tooltip="I am a tooltip 3." ng-click="tooltipCloseActive('3')">

                    <span>tooltip 3:</span>
                </p>
       <br>
            </div>

我已编写多个ui工具提示的代码，并希望在单击其中一个工具提示时关闭其他工具提示。

当我触发点击时，它会进入无限循环。

只想知道如何让它发挥作用：

可能的解决方案： 1）区分用户点击和触发点击：我无法区分（我知道我们如何在jquery中做而不是在角度上）

2）使用工具提示标记（我做过它没有工作）

3）升级ui bootstrap并使用outsideClick（我现在不能在我们的应用程序中执行）

有什么方法可以解决这个一次只能启用一个工具提示的谜团。

非常感谢任何帮助。

PLUNKER：http://plnkr.co/edit/mjqGa26auDSY2G8ThAk4?p=preview

Answer 1

我想我一直在考虑触发器：

我使用is-open格式错误，因为我无法获得

使用mutliple工具提示工作plunker并使用tooltip-is-open http://plnkr.co/edit/gKqdoA3qK74XD1r9b5PR?p=info启用

HTML：

工具提示文字

  <br/> Toggle value: {{ tooltip.isTTOpen }}
</div>
<br/>
<br/>
<br/>
<br/>
<span tooltip-template="'myTooltipTemplate.html'" tooltip-trigger="none" tooltip-is-open="tooltip.isTTOpen2" tooltip-placement="top" ng-click="closeTooltip('isTTOpen2')">Tooltip Text</span>

<br/> Toggle value: {{ tooltip.isTTOpen2 }}
<br/>
<br/>
<br/>
<br/>
<span tooltip-template="'myTooltipTemplate.html'" tooltip-trigger="none" tooltip-is-open="tooltip.isTTOpen3" tooltip-placement="top" ng-click="closeTooltip('isTTOpen3')">Tooltip Text</span>

<br/> Toggle value: {{ tooltip.isTTOpen3 }}

JS：

$scope.tooltip = {
    isTTOpen: false,
    isTTOpen2: false,
    isTTOpen3: false
  };

  $scope.closeTooltip = function(tooltip) {
    console.log(tooltip);
    for (var key in $scope.tooltip) {
      if ($scope.tooltip.hasOwnProperty(key)) {
        console.log(key + " -> " + $scope.tooltip[key]);
        if (tooltip === key) {
          $scope.tooltip[key] = true;
        } else {
          $scope.tooltip[key] = false;
        }
      }
    }
  };

单击任何其他工具提示时，可以打开uib-tooltip

1 个答案: