他のツールチップをクリックしたときに開くことができない

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：私は、複数のUIツールチップのコードを書かれ、ツールチップのいずれかがクリックされたときに、他のツールチップを閉じたいき

<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> 

。

私はクリックをトリガーしているので、無限ループに入っています。

はちょうどそれを動作させるために方法を知りたい：

考えられる解決策： 1）ユーザーのクリックとトリガクリック差別：私たちはjqueryのではなく、行うことができます方法を知っている（私は区別することができませんでした をそれは動作しませんでした私はなかった

2）使用ツールヒントフラグ（）

3）UIのブートストラップをアップグレードし、私は今、私たちのアプリケーションでやって余裕カントoutsideClickを（使用）

）の角度で

一度に1つのツールチップだけを有効にするというこの謎を解決する方法はありますか？

ご協力いただければ幸いです。

PLUNKER：私はトリガーに考えて上だったと思うhttp://plnkr.co/edit/mjqGa26auDSY2G8ThAk4?p=preview

Answer 1

：

私が使用しているが、オープン間違ったフォーマットに起因するこれまで私が使用して

の作業plunkerを取得することができませんでしたmutlipleツールチップと使用可能にツールチップ-あるオープン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; 
     } 
     } 
    } 
    };