使用 Angular Bootstrap 手风琴将 id 添加到 ng-template

Question

我在向标题模板添加动态 ID 时遇到问题。我尝试包含一个 id="{{group.title}}" 但它不起作用。任何帮助或建议都会很棒！

    <div ng-controller="AccordionDemoCtrl">
      <uib-accordion close-others="oneAtATime">
        <div uib-accordion-group class="panel-default" template-url="group-template.html" ng-repeat="group in groups">
          <uib-accordion-heading>
            {{group.title}}
          </uib-accordion-heading>
          {{group.content}}
        </div>
      </uib-accordion>
    </div>

    <script type="text/ng-template" id="group-template.html">
        <div id="{{group.title}}" class="panel-heading" ng-click="toggleOpen()" uib-accordion-transclude="heading">
            <a href tabindex="0" class="accordion-toggle" >
              <span uib-accordion-header ng-class="{'text-muted': isDisabled}">
                <b>{{heading}}</b>
              </span>
            </a>
        </div>
        <div class="panel-collapse collapse" uib-collapse="!isOpen">
          <div class="panel-body" style="text-align: left" ng-transclude></div>
        </div>
      </script>

这里是 plunkr：https://plnkr.co/edit/WbDY1S?p=preview

Answer 1

您不能在该上下文中使用 group，因为您在模板中有不同的范围。

group 将在父作用域中可用，因此您可以使用 {{$parent.group.title}}

https://plnkr.co/edit/f7fHKohu7StKB4wJLeTv?p=preview

使用 Angular Bootstrap 手风琴将 id 添加到 ng-template

Add id to ng-template with Angular Bootstrap accordion

javascript

angularjs

angular-ui

angular-ui-bootstrap