Как установить шаблонные переменные в Угловом UT Bootstrap? (аккордеон)

Question

Я пытаюсь построить аккордеон с Угловым UT 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>.

Но как установить другие настраиваемые переменные шаблона? Я также попытался установить content="{{group.content}}" в теге аккордеона. Даже если он установлен, я не знаю, как его использовать, попробовал {{content.group}} {{content}} и {% content %}.

Полный код на: http://plnkr.co/dSIVGg64vYSTAv5vFSof

Answer 1

Смотрите отредактированный plunker: http://plnkr.co/edit/8YCUemqILQy3knXqwomJ

Вы пытались гнезда контроллера в шаблоне директивы. Я могу ошибаться, но это не работает или, по крайней мере, не очень красиво.

Вместо контроллеров гнездования я бы рекомендовал преобразовать CollapseDemoCtrl в директиву. Затем вы можете передать {{group.content}} или любой другой контент в эту директиву.

---

EDIT: Пример того, как передать данные директивы сфера

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