我在寻找进入角引导UI提示,我想要做的是显示刀尖不专注,或模糊,但是当我点击一个按钮。我知道我可以与供应商做到这一点,但它尚不清楚。我想这样做没有JavaScript或者如果可能JQuery的,因为我敢肯定有一个角度的方式:)
(函数(){ VAR应用= angular.module(ngSignupPage,['ui.bootstrap']) .controller(signUpController功能($范围){ $ scope.tooltipMessage ='霍拉世界报!; $ scope.showTooltip =功能(){ //我想显示这里的自定义消息工具提示 }; });})();<表格名称=signupFormNOVALIDATE NG-提交=showTooltip()> <输入 TYPE =文本 提示={{tooltipMessage}} 提示触发=焦点/ *我可以设置这个当'showTooltip被点击? * / 提示贴装=底/> <按钮和GT;保存< /按钮>< /表及GT;
解决方案
更新
下面是一个使用指令来触发自定义事件没有Jquery的一个更好的解决方案。
在您的应用程序的配置,你添加自定义触发:
的.config(['$ tooltipProvider',函数($ tooltipProvider){ $ tooltipProvider.setTriggers({'自定义事件':'自定义事件'});}]);
HTML:
< DIV火自定义事件> <跨度提示-HTML不安全=我< EM>花式< / EM>工具提示提示触发=自定义事件>目标的工具提示和LT; / SPAN> <按钮和gt;点击ME< /按钮>< / DIV>
指令:
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