引導工具提示不工作

我有一個HTML頁它的一部分是用HTML注射生成使用$sce和ng-bind-html一個typescriptangularjs控制器。
我的問題是，bootstrap工具提示樣式不適用，我只得到簡單的內置黃色工具提示。引導工具提示不工作

public renderHtml =() => { 
this.test = '<span style="text-decoration:underline" data-toggle="tooltip" data-placement="top" title="Tooltip on top">my team</span>'; 
console.log(this.test); // this line is logged 6 times with the same value on each page refresh 

return this.$sce.trustAsHtml(this.test); 
}

的HTML（我直接添加完全相同的HTML片段到頁面和：
生成的HTML（不知道這是否是相關但要注意旁邊console.log部分的註釋）我的控制器功能它工作正常）：

<!--bootstrap tooltip doesn't show--> 
<div class="row margin-25" ng-bind-html="cdc.renderHtml()"></div> 

<div> 
<!--bootstrap tooltip works--> 
<span style="text-decoration:underline" data-toggle="tooltip" data-placement="top" title="Tooltip on top">my team</span> 
</div>

這裏是結果（不工作的左）：

來源

2016-11-21 Yoav

按documentation

public renderHtml =() => { 
 
    this.test = '<span style="text-decoration:underline" data-toggle="tooltip" data-placement="top" title="Tooltip on top">my team</span>'; 
 
    console.log(this.test); // this line is logged 6 times with the same value on each page refresh 
 
    
 
    $timeout(function() { 
 
    angular.element('[data-toggle="tooltip"]').tooltip(); // if you've added jQuery, angular.element simply uses jQuery 
 
    }, 0); // timeout 0 means it'll run in the next $digest cycle. 
 

 
    return this.$sce.trustAsHtml(this.test); 
 
}

：

選擇加入功能

由於性能方面的原因，Tooltip和Popover數據API是可選的，意思是，您必須自己初始化它們。

你的方法例如在jsfiddle：

angular.module('ExampleApp', []) 
 
    .controller('ExampleController', function($sce) { 
 
    this.renderHTML =() => { 
 
     return $sce.trustAsHtml('<span style="text-decoration:underline" data-toggle="tooltip" data-placement="bottom" title="Tooltip on top">my team</span>'); 
 
    }; 
 
    }); 
 
$(document).ready(function() { 
 
    $('span').tooltip(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div ng-app="ExampleApp"> 
 
    <div ng-controller="ExampleController as vm"> 
 
    <div ng-bind-html="vm.renderHTML()"></div> 
 
    <span style="text-decoration:underline" data-toggle="tooltip" data-placement="right" title="Tooltip on top">my team</span> 
 
    </div> 
 
</div>

更好solution是使用指令：

angular.module('ExampleApp', []) 
 
    .controller('ExampleController', function($sce) {}) 
 
    .directive("title", function($timeout) { 
 
    return { 
 
     link: function(scope, element) { 
 
     $timeout(function() { 
 
      $(element).tooltip() 
 
     }, 0); 
 
     } 
 
    } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div ng-app="ExampleApp"> 
 
    <div ng-controller="ExampleController as vm"> 
 
    <div> 
 
     <span style="text-decoration:underline" data-toggle="tooltip" data-placement="bottom" title="Tooltip on top">my team</span> 
 
    </div> 
 
    <span style="text-decoration:underline" data-toggle="tooltip" data-placement="right" title="Tooltip on top">my team</span> 
 
    </div> 
 
</div>

來源

2016-11-21 08:53:16

看看你的第一個解決方案，它只有在爲'document ready'函數添加了'setTimeout'後才工作，否則它會在調用'renderHTML'函數之後發生。爲了實現你的第二種方法，我將不得不閱讀一些關於如何使用'TypeScript'設置一個指令。謝謝！ – Yoav

不需要使用'TypeScript'作爲執行指令。 –

引導工作與jQuery，這意味着所有的互動我當你添加新內容時，jQuery不知道如何使用這個新內容。有一個項目實現了引導角度的方式：ng-bootstrap。

而是在你的代碼編寫HTML添加到頁面中，你應該工作使用directives或components。我會推薦下面的free course by codeschool，它解釋瞭如何使用它們，以及爲什麼這是角度方式。

爲了簡單地得到您的提示工作，沒有更多的做在角方式：

來源

2016-11-21 08:50:10 Pjetr

引導工具提示不工作

回答

相關問題