CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
Bass Jobsen
Bass Jobsen

Reputation: 49044

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

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

Upvotes: 1

Views: 4411

Answers (1)

winkerVSbecks
winkerVSbecks

Reputation: 1173

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

Upvotes: 1

Related Questions