11

色々と調べて色々試しているのですが、よくわかりません。特定のイベントで 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をクリックした場合にツールチップを閉じる方法はありますか?

4

4 に答える 4

6

@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 ディレクティブの実際の内部がトリガーされるため、前のソリューションの厄介な副作用はありません。

于 2014-05-09T18:34:19.037 に答える
4

基本的に、これを機能させるために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;
 };                                    
})
于 2014-01-23T17:35:47.130 に答える