CODEWITHSUNDEEP
angularjsangular-ui-bootstrapangularjs-ng-repeat
Gabriel Littman
Gabriel Littman

Reputation: 552

Can I use ng-controller in a bootstrap accordion group?

I'm trying to create a controller for every item in my ng-bootstrap accordion but the scopeing is not working as I expect. Am I doing something wrong? If I add the controller to a div inside my ng-repeat accordion group it seem to work.

In the following example SubVar does not show up but SubVar2 does.

http://plnkr.co/edit/VLFT133dz3uae887S6qI?p=preview

html

<accordion close-others="oneAtATime">
  <accordion-group ng-repeat="group in groups" ng-controller="SubCtrl">  
    <accordion-heading>
        {{group.title}} can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i><br>
        SubVar: {{sub_var}}

    </accordion-heading>    
    {{group.content}}<br>
    SubVar: {{sub_var}}
    <div ng-controller="SubCtrl">
      SubVar2: {{sub_var}}
    </div>
  </accordion-group>
</accordion>

javascript

angular.module('ui.bootstrap.demo', ['ui.bootstrap']); 
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) {
  $scope.oneAtATime = true;

  $scope.groups = [
    {
      title: 'Dynamic Group Header - 1',
      content: 'Dynamic Group Body - 1'
    },
    {
      title: 'Dynamic Group Header - 2',
      content: 'Dynamic Group Body - 2'
    }
  ];
});
angular.module('ui.bootstrap.demo').controller('SubCtrl', function ($scope) {
  console.log("SUBCTRL ...", $scope.group.title);
  $scope.sub_var = $scope.group.title[$scope.group.title.length-1]
  console.log("SUBCTRL ...", $scope.sub_var);
});

Upvotes: 1

Views: 1318

Answers (1)

Gabriel Littman
Gabriel Littman

Reputation: 552

I worked around this so far by wrapping the accordion group in a div with my ng-repeat and ng-controller.

Not as clean as I would like but it seems to work:

http://plnkr.co/edit/OpetDEMWwvBf94J04Mnr?p=preview

<div ng-controller="AccordionDemoCtrl">

  <accordion close-others="oneAtATime">
    <div ng-repeat="group in groups" ng-controller="SubCtrl">
    <accordion-group>  
      <accordion-heading>
            {{group.title}} can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i><br>
            SubVar: {{sub_var}}

      </accordion-heading>

      {{group.content}}<br>
      SubVar: {{sub_var}}
      <div ng-controller="SubCtrl">
        SubVar2: {{sub_var}}
      </div>
    </accordion-group>
    </div>
  </accordion>
</div>

Upvotes: 3

Related Questions