AngularStrap - поповер в поповере

Question

У меня есть Угловое ремень поповер, который содержит элементы формы:

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

Однако второй popover не появляется, и я предполагаю, что он имеет какое-то отношение к компиляции исходной строки html в fi первый поход. Как правильно составить содержимое popover в 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>