[英]AngularStrap - Popover in a Popover
I have a Angular Strap popover that contains form elements: 我有一个Angular Strap弹出框,其中包含表单元素:
<button type="button" class="btn btn-success" bs-popover title="2nd popover" html="true" data-content="should become a form of some kind">
<span class='glyphicon glyphicon-plus'></span>
</button>
I load that into the first popover 我将其加载到第一个弹出窗口中
<button type="button" "class="btn btn-default" bs-popover data-auto-close="1" data-html="true" data-content="{{popoverContent}}" data-animation="am-flip-x" title="1st popover">
Button label
</button>
using: 使用:
(function() {
"use strict";
angular.module("app").controller("managerController", ["$scope", "imageHierarchyRepository", "$templateCache", "$compile", function ($scope, imageHierarchyRepository, $templateCache, $compile) {
imageHierarchyRepository.query(function(data) {
$scope.hierarchies = data;
});
$scope.popoverContent = $templateCache.get("popoverTemplate.html");
};
}]);
})();
However the second popover doesn't show up, and I'm guessing that it has something to do with compiling the raw html string into the first popover. 但是第二个弹出窗口没有显示,我猜测这与将原始html字符串编译到第一个弹出窗口中有关。 How do I correctly compile the contents of a popover in AngularJS?
如何在AngularJS中正确编译弹出窗口的内容?
I'm not sure if this will answer your question, but here's an example of how to show a popover within a popover using templates: 我不确定这是否会回答您的问题,但以下是一个如何使用模板在弹出框内显示弹出框的示例 :
<button type="button" class="btn btn-primary" bs-popover data-title="primary popover" html="true" data-template-url="popoverTemplate.html">Primary popover</button>
<script type="text/ng-template" id="popoverTemplate.html">
<div class="popover" tabindex="-1">
<div class="arrow"></div>
<h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
<div class="popover-content">
<button type="button" class="btn btn-default" bs-popover data-title="inner popover" html="true" data-template-url="popover2Template.html">
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
</div>
</script>
<script type="text/ng-template" id="popover2Template.html">
<div class="popover" tabindex="-1">
<div class="arrow"></div>
<h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
<form class="popover-content">
<div class="form-group">
<label>Name:</label>
<input type="text" class="form-control"/>
</div>
</form>
</div>
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.