Question

我正在研究Angular Bootstrap UI工具提示，我想做的是显示工具提示不在焦点上或模糊，但是当我点击一个按钮时。我知道我可以与提供商合作，但目前尚不清楚如何。如果可能的话，我想在没有Javascript或JQuery的情况下这样做，因为我确信有一种Angular方式：）

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

Answer 1

<强>更新

这里是一个更好的解决方案，没有Jquery使用指令来触发customEvent。

在您的应用配置中添加自定义触发器：

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

指令：

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

第一个答案

在您的应用配置中，您可以添加自定义触发器：

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

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

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

Check this demo here

AngularJS Bootstrap工具提示 - 触发事件

1 个答案: