自定义AngularJS Bootstrap工具提示

时间:2014-06-09 19:16:21

标签: javascript angularjs angularjs-scope angular-ui-bootstrap angularjs-controller

如何在AngularJS / Bootstrap工具提示中添加自定义展示位置/动画?我能做到:

myApp.controller('TooltipCtrl', function ($scope) {
  $scope.htmlTooltip = 'Here is a tooltip!';
});

它完美无缺,但如果我添加:

$scope.setTriggers({
  placement: 'right'
});

在控制器内部,我得到一个“undefined不是函数”错误。我在语法上做错了什么?

修改

我也试过这样做:

myApp.controller('TooltipCtrl', function ($scope) {
  $scope.placement = 'right';
  $scope.htmlTooltip = 'Here is a tooltip!';
});

但似乎对工具提示上的展示位置没有任何影响。

2 个答案:

答案 0 :(得分:10)

如果您正在尝试配置" $ tooltipProvider"。

$ tooltipProvider是一个提供者,因此只能在CONFIG阶段的角度配置。

您必须尝试在CONFIG阶段设置角度。

    angular.module('yourApp', ['ui.bootstrap'])
        .config(['$tooltipProvider', function ($tooltipProvider) {
        $tooltipProvider.options({
            placement: 'right'
        });
    }])

答案 1 :(得分:2)

Angular $ tooltipProvider已更改为$ uibTooltipProvider。试试这个。

angular.module('yourApp', ['ui.bootstrap'])
.config(['$tooltipProvider', function ($uibTooltipProvider)
{
   $tooltipProvider.options({
   placement: 'right'
  });
}]);