1

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

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

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

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

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

4

1 回答 1

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) {
      }
    }
  });
于 2013-06-01T19:35:42.623 回答