web-dev-qa-db-ja.com

angular ui bootstrapを使用してポップオーバーでhtmlを表示する方法は？

このようにポップオーバーのデモを作成します。ボタンをクリックすると右側にポップオーバーが表示されます。しかし、問題は、ポップオーバーでHTMLを表示する方法です。

<html ng-app="plunker">

  <head>
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>

  <body>
    <button popover-placement="right" popover="On the Right!" class="btn btn-default">Right</button>
  </body>
<script>
angular.module('plunker', ['ui.bootstrap']);

</script>  

</html>

私はこのHTMLを持っており、ポップオーバーにこれを追加する方法が必要です。bootrap.jsにポップオーバーにhtmlを追加する方法があることを知っています。angular UIブートラップを使用したいので使用したくありません。 js

<div ng-controller="axcont">
<ul class="list-group">
  <li class="list-group-item" ng-click="add()">add row</li>
  <li class="list-group-item " ng-click="deleteRow($index)">Deleterow</li>

</ul>
</div>

私はそのようにもっと試してみましたが、定義されていません。私は間違っているかもしれません私はただRNDをやっています

<html ng-app="plunker">

  <head>
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
  </head>

  <body>
    <button pop-over title="Mode of transport" content-url="pop.html" class="btn btn-default">Right</button>
  </body>
<script>
var a=angular.module('plunker', ['ui.bootstrap']);
a.directive('popOver', function ($compile, $http, $templateCache) {
  return {
    restrict: 'A',
    scope: true,
    link: function popOverPostLink(scope, elem, attrs) {
      $http.get(attrs.contentUrl, {cache: $templateCache}).success(
        function (tmpl) {
          var options = {
            content: $compile(tmpl)(scope),
            placement: 'bottom',
            html: true,
            trigger:'click',
            title: attrs.title
          };
          elem.popover(options);
          scope.hidePopover = function () {
            elem.popover('hide');
          }
        }
      );
    }
  };
});

</script>  

</html>
javascriptangularjsangularjs-directiveangular-uiangular-ui-bootstrap
15
Shruti

AngularUIを使用Bootstrapディレクティブtooltip-html-安全でない

<span tooltip-html-unsafe="<div>Hi</div><div>Hi Hi Hi</div><div>Hi</div>">   
   <b>Hover on Me!</b>
</span>

デモとコードはここにあります Plnkr tooltip-html-unsafe

1
bhantol

ドキュメントによると Angular-ui 、ポップオーバーを単にpopoverではなくuib-popoverとして定義する必要があり、htmlをポップオーバーにバインドする場合はuib-popover-html="<div> hello </div>"またはテンプレートバインディングuib-popover-template="<<teamplateNameHere>>"のいずれかを使用します

1
Devvie

tooltip-html-unsafe何でも入れることができます

0
Myxuan

オプションで、templateUrlを追加します。

例えば：

templateUrl: 'your/url' + type + 'popup.html'

詳細： https://github.com/angular-ui/bootstrap/tree/master/src/modal/docs

0
user7398648

tooltip-html-unsafe画像とスタイルタグ付き

<span tooltip-html-unsafe="<img src='https://upload.wikimedia.org/wikipedia/commons/0/00/Lubuntu-icon.png' style='width:24px;'>
      <div style='font-size:24px;'>Tooltip With Image</div>">   
           <b>Hover on Me!</b>
</span>
0
Vishnu T Asok