AngularStrap - 弹出窗口中的弹出窗口

Question

我有一个 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>

我将其加载到第一个弹出窗口中

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

使用：

(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");
        };
    }]);
})();

但是第二个弹出窗口没有出现，我猜这与将原始 html 字符串编译到第一个弹出窗口有关。如何在 AngularJS 中正确编译弹出窗口的内容？

Answer 1

我不确定这是否会回答您的问题，但是 here's an example 如何使用模板在弹出框内显示弹出框：

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

AngularStrap - 弹出窗口中的弹出窗口

AngularStrap - Popover in a Popover

angularjs

angular-strap