带有角度的引导工具提示不起作用答案

【问题标题】：Bootstrap Tooltip with angular not working带有角度的引导工具提示不起作用
【发布时间】：2015-10-27 14:45:00
【问题描述】：

我正在使用 Tooltip Boostrap，但我无法使其在我的角度代码中工作，我强硬的角度代码如：:{{o.client_name}}, :{{o.client_name}} 将在该代码中工作，但它不起作用，有人知道为什么吗？

角度代码：

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

【问题讨论】：

你真的希望像data-title那样注入html吗？
我可以在这里看到它是可能的：stackoverflow.com/questions/13704789/…

标签： javascript angularjs twitter-bootstrap tooltip twitter-bootstrap-tooltip

【解决方案1】：

在仅引导的情况下，它可以立即工作 -> http://jsfiddle.net/5h6kc5o5/

我相信你的问题是使用$(document).ready() - 它在角度上下文中是无用的。它在 Angular 完成渲染之前很久就执行了。请改用$timeout：

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

然后在下一个循环中调用tooltip()。

【讨论】：