在指令中动态创建手风琴

Question

我想创建一组动态展开/折叠列表。我正在使用bootstrap angularjs uib-accordion来实现这一目标。这就是我想要实现的目标。

<p>
    <uib-accordion>
        <uib-accordion-group>
          <uib-accordion-heading>
            <a href="data">I can have markup, too!</a>
          </uib-accordion-heading>
          This is just some content to illustrate fancy headings.
        </uib-accordion-group>
        <uib-accordion-group>
          <uib-accordion-heading>
            <a href="data">I can have markup, too! </a>
          </uib-accordion-heading>
          This is just some content.
        </uib-accordion-group>
  </uib-accordion>
</p>

这里必须在指令中动态创建uib-accordian-group。 这就是我所做的。

MYHTML

<p><my-directive></my-directive></p>

myDirective.js

myApp.directive('myDirective', function($compile){
        return {
            'restrict': 'E',
            template:'<uib-accordion name="topElement" close-others=true ></uib-accordion>',
            link: function ($scope, $element, $attrs) {
                var myList = { //populated dynamically
                    {
                            "title": "link to click",
                            "category": "my category" 
                        }, {
                            "title": "link to click"
                            "category": "data to show on expand" 
                        },
                }

                for(var index = 0; index < myList.length; index++) { 
                    var group = angular.element("<uib-accordion-group>");

                    var linkFormed = angular.element("<a>");
                    linkFormed.attr("text", myList[index].title)
                    linkFormed.attr("href", myList[index].title)
                    linkFormed.attr("title", myList[index].title)

                    var heading = angular.element("<uib-accordion-heading/>");
                    heading.append(linkFormed);

                    group.append(myList[index].category);
                    group.append(heading);

                    $element.find("[name='topElement']").append(group); 
                }
            }
        }
    });

但是当我运行这段代码时，我的html呈现如下所示

<my-directive>
   <uib-accordion name="dialogData" close-others="true">
      <div class="panel-group" ng-transclude=""></div>
   </uib-accordion>
</my-directive>

我在尝试将$compile(group)($scope)添加到$element之前尝试了foo-2016.05.01但是它会出现此错误。

  

错误：[$ compile：ctreq]控制器'uibAccordion'，需要   指令'uibAccordionGroup'，找不到！

我不确定问题是什么。有人可以让我知道如何继续。