如何使用 angular ui bootstrap 在弹出窗口中显示 html? [英] how to show html on pop over using angular ui bootstrap?

查看：27
本文介绍了如何使用 angular ui bootstrap 在弹出窗口中显示 html?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我像这样制作了弹出窗口的演示.当我单击按钮时，它会在右侧显示一个弹出窗口.但现在的问题是我将如何在弹出窗口上显示一些 html.

<头><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="样式表"><身体><button popover-placement="right" popover="在右边！"class="btn btn-default">右</button><脚本>angular.module('plunker', ['ui.bootstrap']);

我有这个 HTML 我需要如何在 popover 上添加它.我知道 bootrap.js 有办法在 popover 上添加 html.我不想使用我想使用 angular UI bootrap.js

<ul class="list-group"><li class="list-group-item" ng-click="add()">添加行</li><li class="list-group-item " ng-click="deleteRow($index)">Deleterow</li>

我做了更多这样的尝试，但没有定义.可能是我错了，我只是在做 RND 

<头><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"/><身体><button pop-over title="Mode of transport" content-url="pop.html" class="btn btn-default">右</button><脚本>var a=angular.module('plunker', ['ui.bootstrap']);a.directive('popOver', function ($compile, $http, $templateCache) {返回 {限制:'A'，范围:真实，链接:函数 popOverPostLink(scope, elem, attrs) {$http.get(attrs.contentUrl, {cache: $templateCache}).success(功能(tmpl){变量选项 = {内容:$compile(tmpl)(scope),位置:'底部'，html:对，触发器:'点击'，标题: attrs.title};elem.popover(选项)；scope.hidePopover = 函数 () {elem.popover('隐藏');}});}};});

解决方案

根据文档 Angular-ui，您应该将弹出窗口定义为 uib-popover 而不仅仅是 popover，如果您想将 html 绑定到弹出窗口，您可以使用uib-popover-html="<div> hello </div>" 或者模板绑定 uib-popover-template="<<teamplateNameHere>>"

I make demo of pop over like this .It show a pop over on right side when I click the button .But now problem is that how I will show some html on pop over .

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

I have this HTML I need to how on add this on pop over .I know there is way in bootrap.js to add html on popover .I don't want to use that I want to use angular UI bootrap.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>

I did more try on that like that but getting undefined.May be I am wrong I just doing 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>

解决方案

According to the docs Angular-ui, you should be defining the popover as uib-popover instead of just popover, and if you would like to bind html to the popover you would either use uib-popover-html="<div> hello </div>" or template binding uib-popover-template="<<teamplateNameHere>>"

这篇关于如何使用 angular ui bootstrap 在弹出窗口中显示 html?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆