如何在angularjs中使用twitter引导程序javascript组件

如何在angularjs中使用twitter引导程序javascript组件

问题描述:

我想在我的angularjs web应用程序中使用twitter引导程序的tootltip。当我简单地在我的代码中使用它们时,将jQuery初始化放在我的js文件顶部,在document.ready之内,它完美地工作。如何在angularjs中使用twitter引导程序javascript组件

$(document).ready(function(){ 
    $(function() { 
     $('[data-toggle="tooltip"]').tooltip() 
    }); 
    $('.myslider').myslider(); 
}); 

var myapp = angular.module("eplApp",['ui.router']); 

但是当我通过UI路由使用它们的视图。它停止工作,没有在控制台中的错误.. 我也使用更多的JavaScript组件,如crousel。我想知道如何在视图中初始化/调用它们。document.ready在视图中不起作用。

我应该在控制器中初始化它们吗? 如果是,比如何?

+0

[Angularjs:Directive With Bootstrap Tooltip]的可能重复(https://*.com/questions/37711703/angularjs-directive-with-bootstrap-tooltip) –

如果你想使用引导UI的角度,这将是一个更好的主意,用角模块ui.bootrap发现here

虽然你总是可以创建一个引导提示你自己的角度指令,这是一个更快的出路。

var myapp = angular.module("eplApp",['ui.router','ui.bootstrap']); 

,并在你的HTML

<button tooltip-placement="{{placement.selected}}" uib-tooltip="On the {{placement.selected}}" type="button" class="btn btn-default">Tooltip text</button> 

更改航线使用ui.router不会再次触发$document.ready()。如果在调用$doucment.ready()之后加载状态,您的代码将不起作用。如果您不希望包含ui.bootstrap,请在您的指令的链接函数中使用$('[data-toggle="tooltip"]').tooltip()创建指令并初始化工具提示。