我正在使用 Tooltip Boostrap,但我无法在我的 Angular 代码中使其工作,我坚韧的 Angular 代码如: :{{o.client_name}}, :{{o.client_name}} 将在该代码中工作,但它不起作用,有人知道为什么吗?
Angular 代码:
<div class="col-md-4" ng-repeat="o in form.users" ng-show="form.users.length">
<div>
<p><b>title</b>:{{o.title}}</p>
<p><b>client name</b>:{{o.client_name}}</p>
<p><b>description</b>:{{o.description}}</p>
<p><b>dev tool</b>:{{o.primary_develop}}</p>
</div>
<div class="base_image_div">
<img ng-src="/images/{{o.thumbnail}}" class="img-responsive base_image" alt="{{o.description}}">
</div>
</div>
我的 Angular 工具提示代码:
<div class="container">
<a href="#" class="custom-tooltip" data-toggle="tooltip" data-placement="right" data-html="true" title=""
data-title="<div class='row ballon-tooltip'>
<ul>
<li> <b>title</b>:{{o.title}}</li>
<li> <b>client name</b>:{{o.client_name}} </li>
<li> <b>description</b>:{{o.description}}</li>
<li> <b>dev tool</b>:{{o.primary_develop}}</li>
</ul>
</div>">
<img ng-src="../public/images/{{o.thumbnail}}" class="img-responsive base_image" alt="{{o.description}}"></a></li>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
最佳答案
在仅 Bootstrap 的情况下,它可以立即工作 -> http://jsfiddle.net/5h6kc5o5/
我相信你的问题是使用 $(document).ready()
- 它在 Angular 上下文中没有用。它是在 Angular 完成渲染之前很久执行的。使用 $timeout
代替:
$timeout(function() {
$('[data-toggle="tooltip"]').tooltip();
})
然后在下一个循环中调用tooltip()
。
关于javascript - 带 Angular Bootstrap 工具提示不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33371010/