Question

我是角度UI的新手，我使用弹出窗口（popover）作为复杂的菜单。但是我找不到将按钮，文本，图像等html内容插入到弹出框中的方法。这是我的HTML代码

    <!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


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


    <br><br><br><br>

<div ng-controller="PopoverDemoCtrl">
    <button popover-placement="bottom" Popover-animation="true" popover="I have a title!" popover-title="The title." class="btn btn-default">Click me</button>
</div>
  </body>
</html>

example.js有以下代码，我发现有点令人困惑。

    angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope) {
  $scope.dynamicPopover = {
    content: 'Hello, World!',
    templateUrl: 'myPopoverTemplate.html',
    title: 'Title'
  };
});

请让我知道如何添加html内容，并描述使用的js函数。

Answer 1

使用pop-over的最简单方法是使用popover-template指令。

<script id="myPopoverTemplate.html" type="text/ng-template">
//Insert detail here
    <div><button>Test</button></div>
    <hr />
</script>

html就像这样：

<button popover-placement="bottom" Popover-animation="true" popover="I have a title!" popover-title="The title." popover-template="myPopoverTemplate.html" class="btn btn-default">Click me</button>

这是我第一次回答，抱歉挣扎。 PS。我也不确定，我没有参加试运行。

角度UI弹出内容

1 个答案: