web-dev-qa-db-ja.com

AngularJS UI bootstrap HTMLコンテンツでポップオーバーを作成するにはどうすればよいですか？

Prettified JSONオブジェクトを含むpreタグで bootstrap popover を作成したい。素朴な実装、

<span popover='<pre>{[ some_obj | json:"  " ]}</pre>'
      popover-trigger='mouseenter'>

ポップアップに挿入する前にコンテンツをエスケープします。 HTMLコンテンツでポップオーバー本文を指定する最良の方法は何ですか？

angularjsangular-uiangular-ui-bootstrapangularjs-bootstrap
43
Andrey Fedorov

[〜＃〜] update [〜＃〜]：

this で見られるように、デフォルトのテンプレートを上書きせずにこれを行うことができるはずです。

オリジナル：

angular 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このフィルターを使用したテンプレート

// update popover template for binding unsafe html
angular.module("template/popover/popover.html", []).run(["$templateCache", function ($templateCache) {
    $templateCache.put("template/popover/popover.html",
      "<div class=\"popover {{placement}}\" ng-class=\"{ in: isOpen(), fade: animation() }\">\n" +
      "  <div class=\"arrow\"></div>\n" +
      "\n" +
      "  <div class=\"popover-inner\">\n" +
      "      <h3 class=\"popover-title\" ng-bind-html=\"title | unsafe\" ng-show=\"title\"></h3>\n" +
      "      <div class=\"popover-content\"ng-bind-html=\"content | unsafe\"></div>\n" +
      "  </div>\n" +
      "</div>\n" +
      "");
}]);

編集：ここに Plunker の実装があります。

編集2：この答えはヒットし続けているので、できる限り更新し続けます。参考として ここ は、angular-uiのテンプレートですbootstrap=リポジトリ。これが変更された場合、オーバーライドテンプレートは、一致する更新とng-bind-html=\"title | unsafe\"およびng-bind-html=\"content | unsafe\"属性は作業を継続します。

更新された会話については、 issue here を確認してください。

71
Matthew.Lothian

popover-template ディレクティブを使用します

angular-uiと同等またはそれ以上のバージョン0.13.0を使用している場合、最適なオプションpopover-templateディレクティブを使用することです。使用方法は次のとおりです。

<button popover-template="'popover.html'">My HTML popover</button>

<script type="text/ng-template" id="popover.html">
    <div>
        Popover content
    </div>
</script>

注意：popover-template="'popover.html'"のテンプレート名を囲む引用符を忘れないでください。

デモプランカーを参照

補足として、上記の<script type="text/ng-template>要素で宣言する代わりに、専用のhtmlファイルでポップオーバーテンプレートを外部化することができます。

2番目のデモプランカーを参照

24
Michael P. Bazos

Githubプロジェクトにソリューションを投稿しました： https://github.com/angular-ui/bootstrap/issues/52

この機能をプロジェクトに追加したいのですが、ここにパッチがあります。

これらのディレクティブを追加します。

angular.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");
    }]);

そして、テンプレートを追加します。

<div class="popover {{placement}}" ng-class="{ in: isOpen(), fade: animation() }">
  <div class="arrow"></div>

  <div class="popover-inner">
      <h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
      <div class="popover-content" bind-html-unsafe="content"></div>
  </div>
</div>

使用法： <button popover-placement="top" popover-html-unsafe="On the <b>Top!</b>" class="btn btn-default">Top</button>

Plunkrで表示： http://plnkr.co/edit/VhYAD04ETQsJ2dY3Uum3?p=preview

9
user1067920

デフォルトのポップオーバーテンプレートを変更して、Htmlコンテンツを許可することを指定する必要があります。 popover-content div、これはcontentプロパティにバインドされ、安全でないhtmlを許可します。

 angular.module("template/popover/popover.html", []).run(["$templateCache", function ($templateCache) {
        $templateCache.put("template/popover/popover.html",
            "<div class='popover {{placement}}' ng-class='{ in: isOpen(), fade: animation() }'>" + 
            "<div class='arrow'></div><div class='popover-inner'>" + 
            "<h3 class='popover-title' ng-bind='title' ng-show='title'></h3>" + 
            "<div class='popover-content' ng-bind-html-unsafe='content'></div>" +
            "<button class='btn btn-cancel' ng-click='manualHide()'>Cancel</button>" +
            "<button class='btn btn-apply' ng-click='manualHide()'>Apply</button></div></div>");
    }]);
6
Andres

従来のすべてのBootstrap popoverのニーズに対して、次のangularディレクティブを使用できます。HTMLテンプレートから混乱を取り除き、非常に簡単です。つかいます。

ポップオーバーのtitle、content、placement、フェードイン/フェードアウトdelay、triggerイベント、およびコンテンツをhtml。また、コンテンツのオーバーフローとクリッピングを防ぎます。

ここにすべてのコードを持つ関連プランカー http://plnkr.co/edit/MOqhJi

スクリーンキャップ

imgur

使用法

<!-- HTML -->
<div ng-model="popup.content" popup="popup.options">Some element</div>

/* JavaScript */
this.popup = {
  content: 'Popup content here',
  options: {
    title: null,
    placement: 'right', 
    delay: { show: 800, hide: 100 }
  }
};

JavaScript

/**
 * Popup, a Bootstrap popover wrapper.
 *
 * Usage: 
 *  <div ng-model="model" popup="options"></div>
 * 
 * Remarks: 
 *  To prevent content overflow and clipping, use CSS
 *  .popover { Word-wrap: break-Word; }
 *  Popup without title and content will not be shown.
 *
 * @param {String}  ngModel           popup content
 * @param {Object}  options           popup options
 * @param {String}  options.title     title
 * @param {Boolean} options.html      content should be treated as html markup
 * @param {String}  options.placement placement (top, bottom, left or right)
 * @param {String}  options.trigger   trigger event, default is hover
 * @param {Object}  options.delay     milliseconds or { show:<ms>, hide:<ms> }
 */
app.directive('popup', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    scope: {
      ngModel: '=',
      options: '=popup'
    },
    link: function(scope, element) {
      scope.$watch('ngModel', function(val) {
        element.attr('data-content', val);
      });

      var options = scope.options || {} ; 

      var title = options.title || null;
      var placement = options.placement || 'right';
      var html = options.html || false;
      var delay = options.delay ? angular.toJson(options.delay) : null;
      var trigger = options.trigger || 'hover';

      element.attr('title', title);
      element.attr('data-placement', placement);
      element.attr('data-html', html);
      element.attr('data-delay', delay);
      element.popover({ trigger: trigger });
    }
  };
});
6
Mikko Viitala

https://github.com/jbruni/bootstrap-bower-jbruni を参照してください。これにより、popover-templateを使用できます。

3
Thierry

次のCSSスタイリングは、特定のケースで私が望んでいたことをしたようです。

.popover-content {
  white-space: pre;
  font-family: monospace;
}

一般的な質問は未解決のままです。

1
Andrey Fedorov