angular bootstrap accordion is-open scope

Question

I am trying to figure out how to close an accordion group from a button within the group.. seems like it should be easy.. but looks to be something with the scope being defined only within the group and not available in the controller? in the code snippet below the first button is how I would like to close the accordion group. The second button works.

Here is a simple plunkr on what I'm working on https://plnkr.co/edit/bghRaioszH3SZmiWxcoH?p=preview

 <uib-accordion close-others="true" ng-controller="testCtrl">
      <uib-accordion-group panel-class="panel-primary" is-open="status.isOpen">
        <uib-accordion-heading>
        Open: {{ status.isOpen }}
        <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.isOpen, 'glyphicon-chevron-right': !status.isOpen}"></i>
        </uib-accordion-heading>
      <button class="btn btn-warning" ng-click="close()">Cancel</button>
      <button class="btn btn-warning" ng-click="status.isOpen=!status.isOpen">Cancel</button>
  </uib-accordion-group>
    </uib-accordion>

Paul · Accepted Answer · 2016-05-22 15:24:45Z

1

To access the status of an accordion group through your controller's scope, you need to do something like this:

Move ng-controller="testCtrl" to the <body> element
Define status explicitly in your controller's scope:

.controller('testCtrl', function($scope) { $scope.status = { isOpen: true } $scope.close = function(){ $scope.status.isOpen = false; }; });

edited May 22, 2016 at 15:24

answered May 22, 2016 at 13:26

Paul

1966 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mason Over a year ago

in my production application the controller is defined in the view state definition.. Dozens of other functions of the controller are working fine.

Mason Over a year ago

hmm! making that change in the plunkr does indeed create the outcome im looking for! i guess i need to figure out how to incorporate using the .state router controller model i am using.

Mason Over a year ago

well. Not sure what i changed to make it work. The above answer must have lead me there somehow. everything is working now.. Thank you.

Collectives™ on Stack Overflow

angular bootstrap accordion is-open scope

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related