如何在 Angular UI Bootstrap 中设置模板变量？ （手风琴）

Question

我尝试使用 Angular UI Bootstrap (http://angular-ui.github.io/bootstrap/#/accordion) 构建一个手风琴。在How do I set model according to chosen accordion group. UI Bootstrap，我找到了使用模板的可行解决方案。

在我的代码中，我使用<script type="text/ng-template" id="template/accordion/accordion-group.html"> 添加模板

在这个模板中可以使用<accordion-group heading="{{group.title}}" content="{{group.content}}" ng-repeat="group in groups"></accordion-group>设置的{{heading}}。

但是如何设置其他自定义模板变量？ 我也尝试在手风琴标签中设置content="{{group.content}}"。就算设置了也不知道怎么用，试过{{content.group}} {{content}}和{% content %}。

完整代码在：http://plnkr.co/dSIVGg64vYSTAv5vFSof

Answer 1

查看编辑后的插件：http://plnkr.co/edit/8YCUemqILQy3knXqwomJ

您试图在指令的模板中嵌套控制器。我可能弄错了，但这不起作用，或者至少不是很好的方式。

我建议将CollapseDemoCtrl 也转换为指令，而不是嵌套控制器。然后，您可以将 {{group.content}} 或任何其他内容传递给该指令。

---

编辑：如何将数据传递到指令范围的示例

HTML 将是这样的：

<span ng-repeat="group in groups">
  <div testDirective content="group.content" title="group.title"> </div>
</span>

指令看起来像这样：

angular.module('testModule', [])
  .directive('testDirective', function(){
    return {
      restrict: 'A',
      scope: { 
        content:'=content',
        title: '=title'
      },
      template: '<h1>{{title}}<h1> <div>{{content}}</div>',
      link: function(scope, element, attrs) {
      }
    }
  });