如何在Angular UI引导中设置模板变量?(手风琴)

Question

我尝试用Angular UI Bootstrap (http://angular-ui.github.io/bootstrap/#/accordion)构建一个手风琴。关于我如何根据选择的手风琴组设置模型。UI引导我找到了一个使用模板的有效解决方案。

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

在此模板中，a可以使用<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) {
      }
    }
  });