web-dev-qa-db-ja.com

カスタムイベントでangular-uiツールチップを非表示にする

私は周りを見回してさまざまなことを試してきましたが、それを理解することはできません。特定のイベントでangular-uiツールチップを非表示にすることは可能ですか？

私がやりたいのは、誰かがdivにカーソルを合わせたときにツールチップを表示し、ユーザーがそれをクリックしたときにツールチップを閉じることです。これは、別のポップアップを表示するためです。カスタムトリガーイベントで試しましたが、機能しないようです。私はこれを作りました：

<div ng-app="someApp" ng-controller="MainCtrl" class="likes" tooltip="show favorites"     tooltip-trigger="{{{true: 'mouseenter', false: 'hideonclick'}[showTooltip]}}" ng-click="doSomething()">{{likes}}</div>

var app = angular.module('someApp', ['ui.bootstrap']);

app.config(['$tooltipProvider', function($tooltipProvider){
 $tooltipProvider.setTriggers({
  'mouseenter': 'mouseleave',
  'click': 'click',
  'focus': 'blur',
  'hideonclick': 'click'
 });
}]);

app.controller('MainCtrl', function ($scope) {
 $scope.showTooltip = true;
 $scope.likes = 999;

 $scope.doSomething = function(){
    //hide the tooltip
    $scope.showTooltip = false;                                   
 };

})

http://jsfiddle.net/3ywMd/

ツールチップは、2回目ではなく、最初のクリックで閉じる必要があります。ユーザーがdivをクリックした場合にツールチップを閉じる方法はありますか？

angularjstooltipangular-ui-bootstrap
11
Mikel Porras Hoogland

@ shidhin-crの設定の提案を試しました$scope.tt_isOpen = falseしかし、ツールチップはフェードアウトしますが、それでもDOMに存在する（そしてポインタイベントを処理する）というかなり重大な問題がありました。そのため、ツールチップは表示されなくても、以前はツールチップの背後にあったコンテンツをユーザーが操作できないようにすることができます。

私が見つけたより良い方法は、ツールチップターゲットでツールチップトリガーとして使用されるイベントを単純にトリガーすることでした。したがって、たとえば、ツールチップターゲットであり、クリックするとトリガーされるボタンがある場合...

<button id="myButton"
        tooltip="hi"
        tooltip-trigger="click">
</button>

次に、JavaScriptで、いつでも「クリック」イベントをトリガーしてツールチップを閉じることができます。イベントをトリガーする前に、ツールチップが実際に開いていることを確認してください。

// ... meanwhile, in JavaScript land, in your custom event handler...
if (angular.element('#myButton').scope().tt_isOpen) {
    angular.element('#myButton').trigger('click');
}

これにより、AngularUIのTooltipディレクティブの実際の内部がトリガーされるため、前のソリューションのような厄介な副作用はありません。

6
Michael Cook

基本的に、tooltip-triggerで遊んでこれを機能させることはできません。 ToolTipディレクティブコードを調べたところ、ToolTip属性がtt_isOpenというスコープ属性を公開していることがわかりました。

したがって、ng-click関数で、この属性をfalseに設定すると、ツールチップが非表示になります。

ここで更新されたデモを参照してください

http://jsfiddle.net/3ywMd/10/

このような

app.controller('MainCtrl', function ($scope) {
 $scope.likes = 999;
 $scope.doSomething = function(){
    //hide the tooltip
    $scope.tt_isOpen = false;
 };                                    
})
4
Shidhin Cr

Michaelのソリューションは、そこまでの道のりの90％を取得しましたが、コードを実行すると、angularは「$ digestはすでに進行中です」と応答しました。トリガーをタイムアウトでラップしただけです。おそらく最善ではありません。解決策ですが、最小限のコードが必要です

// ... meanwhile, in JavaScript land, in your custom event handler...
if (angular.element('#myButton').scope().tt_isOpen) {
    $timeout( function(){
        angular.element('#myButton').trigger('click');
    }, 100);
}
4
liteflier

将来の参考のために、受け入れられた回答angular.element('.yourTooltip').scope().tt_isOpenは、ツールチップが観察できなくなったため、新しいバージョンでは機能しません。したがって、トゥートリップ全体がDOMから削除されます。簡単な解決策は、ツールチップがDOMに存在するかどうかを確認することです。

@liteflierの答えから借りて、

// ... meanwhile, in JavaScript land, in your custom event handler...
if (angular.element('.yourTooltip').length) { //if element is present in DOM
    setTimeout( function(){
        //Trigger click on tooltip container
        angular.element('.yourTooltipParent').trigger('click');
    }, 100);
}
1
RijulB