Как показать HTML на всплывающих окон с помощью углового UI начальной загрузки?
Я делаю демонстрацию всплывающих окон, как это. Это показывает всплывающее окно с правой стороны, когда я нажимаю кнопку. Но теперь проблема в том, как я покажу немного 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 на popover. Я не хочу использовать это, я хочу использовать угловой интерфейс 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>
Я сделал больше примерки, но получаю неопределенность. Может быть, я ошибаюсь, я просто делаю 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>