AngularJS引导工具提示 - 在事件触发 [英] AngularJS Bootstrap Tooltip - trigger on event

问题描述

我在寻找进入角引导UI提示，我想要做的是显示刀尖不专注，或模糊，但是当我点击一个按钮。我知道我可以与供应商做到这一点，但它尚不清楚。我想这样做没有JavaScript或者如果可能JQuery的，因为我敢肯定有一个角度的方式：）

 （函数（）{
    VAR应用= angular.module（ngSignupPage，['ui.bootstrap']）
        .controller（signUpController功能（$范围）{
            $ scope.tooltipMessage ='霍拉世界报！;
            $ scope.showTooltip =功能（）{
                //我想显示这里的自定义消息工具提示
            };
        }）;
}）（）;＆LT;表格名称=signupFormNOVALIDATE NG-提交=showTooltip（）＆GT;
     ＆LT;输入
        TYPE =文本
        提示={{tooltipMessage}}
        提示触发=焦点/ *我可以设置这个当'showTooltip被点击？ * /
        提示贴装=底/＆GT;
    ＆LT;按钮和GT;保存＆LT; /按钮＆GT;
＆LT; /表及GT;
 

解决方案

更新

下面是一个使用指令来触发自定义事件没有Jquery的一个更好的解决方案。

在您的应用程序的配置，你添加自定义触发：

 的.config（['$ tooltipProvider'，函数（$ tooltipProvider）{
  $ tooltipProvider.setTriggers（{'自定义事件'：'自定义事件'}）;
}]）;
 

HTML：

 ＆LT; D​​IV火自定义事件＆GT;
  ＆LT;跨度提示-HTML不安全=我＆LT; EM＆GT;花式＆LT; / EM＆GT;工具提示提示触发=自定义事件＆GT;目标的工具提示和LT; / SPAN＆GT;
  ＆LT;按钮和gt;点击ME＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
 

指令：

  angular.module（'对myApp'）。指令（fireCustomEvent'，函数（）{
    返回{
        限制：A，
        链接：功能（范围，元素）{
            element.find（'按钮'）。在（'点击'，功能（）{
                element.find（'跨'）的触发器（自定义事件）;
            }）;
        }
    };
}）;
 

这里检查演示

第一个答案

在您的应用程序的配置，你可以添加自定义触发：

 的.config（['$ tooltipProvider'，函数（$ tooltipProvider）{
  $ tooltipProvider.setTriggers（{'自定义事件'：'自定义事件'}）;
}]）;
 

然后在你控制器，可以触发事件。不幸的是，你需要jQuery来做到这一点：

  angular.module（'对myApp'）。控制器（'myController的'，['$范围，$超时'，
功能（$范围，$超时）{
  $ scope.fireCustomEvent =功能（）{
      $超时（函数（）{
        $（'＃tooltipTarget'）的触发器（自定义事件'）。
      }，0）;
    }
}]）;
 

这里选中此演示

I'm looking into the Angular Bootstrap UI tooltip, what i'd like to do is show the tool tip not on focus, or blur, but when I click a button. I know i can do this with a provider, but it's not clear how. I'd like to do this without Javascript or JQuery if possible, as i'm sure there's an Angular way :)

(function(){
    var app = angular.module("ngSignupPage", ['ui.bootstrap'])
        .controller("signUpController", function($scope) {      
            $scope.tooltipMessage = 'Hola mundo!';          
            $scope.showTooltip = function(){
                //  I'd like to show the tooltip with a custom message here
            };
        });
})();

<form name="signupForm" noValidate ng-submit="showTooltip()">
     <input 
        type="text" 
        tooltip="{{tooltipMessage}}" 
        tooltip-trigger="focus" /* Can i set this when 'showTooltip' is clicked? */
        tooltip-placement="bottom" />
    <button>Save</button>
</form>

解决方案

UPDATE

Here's a better solution without Jquery using a directive to fire the customEvent.

On your app config you add the custom trigger:

.config(['$tooltipProvider', function($tooltipProvider){
  $tooltipProvider.setTriggers({'customEvent': 'customEvent'});
}]);

Html:

<div fire-custom-event>
  <span tooltip-html-unsafe="My <em>fancy</em> tooltip" tooltip-trigger="customEvent">Target for a tooltip</span>
  <button>Click me</button>
</div>

Directive:

angular.module('myApp').directive('fireCustomEvent', function () {
    return {
        restrict: "A",
        link: function (scope, element) {
            element.find('button').on('click', function () {
                element.find('span').trigger("customEvent");
            });
        }
    };
});

Check the demo here

FIRST ANSWER

On your app config you can add a custom trigger:

.config(['$tooltipProvider', function($tooltipProvider){
  $tooltipProvider.setTriggers({'customEvent': 'customEvent'});
}]);

And then in you controller you can fire the event. Unfortunately you need JQuery to do this:

angular.module('myApp').controller('myController', ['$scope','$timeout',
function($scope, $timeout) {
  $scope.fireCustomEvent = function() {
      $timeout(function() {
        $('#tooltipTarget').trigger('customEvent');
      }, 0);
    }
}]);

Check this demo here

这篇关于AngularJS引导工具提示 - 在事件触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！