Question

我有一个包含表单元素的Angular Strap popover：

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

我将其加载到第一个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>

使用：

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

然而，第二个popover并没有出现，我猜测它与将原始html字符串编译成第一个popover有关。如何在AngularJS中正确编译popover的内容？

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 - Popover中的Popover

1 个答案: