如何在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">

添加模板

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

但是如何设置其他自定义模板变量？ 我也尝试在accordion标签中设置content="{{group.content}}"。即使设置了，我也不知道如何使用它，尝试{{content.group}} {{content}}和{% content %}。

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

Answer 1

参见编辑的plunker：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) {
      }
    }
  });