Howto set template variables in Angular UI Bootstrap? (accordion)

Question

I try to build a accordion with Angular UI Bootstrap (http://angular-ui.github.io/bootstrap/#/accordion). On How do I set model according to chosen accordion group. UI Bootstrap i found a working solution to use a template.

In my code i add the template with <script type="text/ng-template" id="template/accordion/accordion-group.html">

In this template a can use {{heading}} set by <accordion-group heading="{{group.title}}" content="{{group.content}}" ng-repeat="group in groups"></accordion-group>.

But how do i set other custom template variables? I tried to set content="{{group.content}}" in the accordion tag too. Even if set, i don't know how to use it, tried {{content.group}} {{content}} and {% content %}.

Complete code on: http://plnkr.co/dSIVGg64vYSTAv5vFSof

winkerVSbecks · Accepted Answer · 2013-06-01T22:30:17.673

1

See the edited plunker: http://plnkr.co/edit/8YCUemqILQy3knXqwomJ

You were trying to the nest a controller within the template of a directive. I might be mistaken, but that doesn't work or at least not in a very nice manner.

Instead of nesting controllers I would recommend converting CollapseDemoCtrl into a directive too. You can then pass the {{group.content}} or any other content to this directive.

EDIT: Example of how to pass data to directive scope

The HTML will be something like this:

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

The directive will look something like this:

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) {
      }
    }
  });

edited Jun 01 '13 at 22:30

answered Jun 01 '13 at 19:35

winkerVSbecks

1,173
1
10
24

thanks. It seems you solve my problem, but didn't answer the question. Cause when i don't nest the controller within the template, i can't use the `{{group.content}}` in the template. – Bass Jobsen Jun 01 '13 at 21:15
That is because you use a `ng-repeat="group in groups"` to iterate through the groups array. Therefore, for a start `{{group}}` is only available within the `ng-repeat`. It's content is then passed into the `accordion` through transclusion and therefore is not available as `{{content}}` or `{{group.content}}`. This tutorial on transclusion should help you: [http://www.youtube.com/watch?v=cjrBTjMvruI](http://www.youtube.com/watch?v=cjrBTjMvruI) – winkerVSbecks Jun 01 '13 at 21:46
1

An alternative approach would be to bind the `{{group.content}}` to a model within the accordion directive scope, say `{{mycontent}}`. Then within the accordion template you can access the original content using `{{mycontent}}`. But you don't need to do any of this simply because whatever code you put within the `` tags gets passed to the accordion body. – winkerVSbecks Jun 01 '13 at 21:49
1

do you have some example code of this alternative and will you add this to your answer (cause it answers the question too) – Bass Jobsen Jun 01 '13 at 22:12

Howto set template variables in Angular UI Bootstrap? (accordion)

1 Answers1