2015-08-04 2 views
-1

Я новичок в угловом интерфейсе, и я использую всплывающее окно (popover) в качестве сложного меню. Но я не мог найти способ вставки html-контента, такого как кнопки, тексты, изображения в popover. Вот мой html-кодangular UI popup content

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

ответ

0

Самый простой способ использования 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. Я тоже не уверен, я не пошел на тестовый прогон.