Angularjs

HTMLコンテンツを使用してAngularJSUIブートストラップポップオーバーを作成するにはどうすればよいですか？



How Do I Create An Angularjs Ui Bootstrap Popover With Html Content



解決：

アップデート ：

これに見られるように、デフォルトのテンプレートをオーバーライドせずにこれを実行できるはずです。



オリジナル：

角度1.2+現在ng-bind-html-unsafeは削除されました。 $ sceサービスリファレンスを使用する必要があります。



信頼できるHTMLを作成するためのフィルターは次のとおりです。

MyApp.filter（ 'unsafe'、['$ sce'、function（$ sce）{return function（val）{return $ sce.trustAsHtml（val）;};}]）;
これが上書きされます Angular Bootstrap 0.11.2 このフィルターを利用したテンプレート
 
//安全でないhtmlをバインドするためのポップオーバーテンプレートを更新しますangular.module（ 'template / popover / popover.html'、[]）。run（['$ templateCache'、function（$ templateCache）$ templateCache.put（ 'template / popover / popover.html '、'  n '+'  n '+'  n '+'  n '+'
ng-bind-html =  'content |動作を継続するにはunsafe  '属性。
 
更新された会話については、ここで問題を確認してください。
  
popover-templateディレクティブを使用する
 
のバージョンを使用している場合 角度UI 以上 0.13.0 、あなたの最良のオプションは、を使用することですpopover-templateディレクティブ。使用方法は次のとおりです。
 
私のHTMLポップオーバーポップオーバーコンテンツ
注意：テンプレート名の前後の引用符を忘れないでくださいpopover-template = '' popover.html ''。
 
見る デモプランカー  
 
 
補足として、ポップオーバーテンプレートを、で宣言する代わりに、専用のhtmlファイルで外部化することができます。上記の要素。
 
見る 2番目のデモプランカー  
  
githubプロジェクトにソリューションを投稿しました：https：//github.com/angular-ui/bootstrap/issues/520
 
この機能をプロジェクトに追加したいのですが、ここにパッチがあります。
 
それらのディレクティブを追加します。
 
angle.module（ 'XXX'）。directive（ 'popoverHtmlUnsafePopup'、function（）{return {restrict： 'EA'、replace：true、scope：{title： '@'、content： '@'、placement： '@ '、animation：'＆ '、isOpen：'＆ '}、templateUrl：' template / popover / popover-html-unsafe-popup.html '};}）。directive（' popoverHtmlUnsafe '、[' $ tooltip '、function （$ tooltip）{return $ tooltip（ 'popoverHtmlUnsafe'、 'popover'、 'click'）;}]）;
そして、テンプレートを追加します。
 
 
  
使用法：