CODEWITHSUNDEEP
javascriptangularjsaccordionangularjs-scopeangular-ui-bootstrap
mirobel
mirobel

Reputation: 45

Managing scope in nested UI Bootstrap accordions

I am using UI-Bootstrap with this simple accordion menu. I tried to nest them, but I can't get the scope of the nested element.

ng-click also won't work, I guess because it's already used to open and close the accordion. Is there a way to get to the parent element from the child?

DEMO

HTML:

<div ng-controller="accCtrl">
<accordion close-others="oneAtATime">
  <accordion-group heading="Classic Accoridion (1)" is-open="$parent.step1">
    <a href="" ng-click="clasClick()">Classic Click</a>
  </accordion-group>
  <accordion-group heading="Nested Accordian (2)" is-open="$parent.step2">
    <accordion close-others="oneAtATime">
      <accordion-group heading="Test (3)" is-open="$parent.step3">
        <a href="" ng-click="nestClick()">Nested Click</a>
      </accordion-group>
    </accordion>
  </accordion-group>
</accordion>
<p>
  Step1: {{step1}}
  <br/>Step2: {{step2}}
  <br/>Step3: {{step3}}
  <br/>
  <a href="" ng-click="openTwo()">Open Two</a>
  <br/>
  <a href="" ng-click="openThree()">Open Three</a>
</p>

JS:

function accCtrl($scope, $http, $timeout) {
    $scope.oneAtATime = true;

    $scope.step1 = true;
    $scope.step2 = false;
    $scope.step3 = false;


    $scope.openTwo = function() {
        $scope.step2 = true;
    }

    $scope.openThree = function() {
        $scope.step3 = true;
    }

    $scope.clasClick = function() {
        console.log("classic clicked");
    }

    $scope.nestClick = function() {
        console.log("nested clicked");
    }
}

Upvotes: 2

Views: 1034

Answers (1)

Aco Mitevski
Aco Mitevski

Reputation: 353

It looks like every accordion directive is creating an own scope. For more details you will have to look into the implementation of accordion at https://github.com/angular-ui/bootstrap/blob/master/src/accordion/accordion.js

To access the parent of parent you can type $parent.$parent like this:

<accordion close-others="oneAtATime">
  <accordion-group heading="Classic Accoridion (1)" is-open="$parent.step1">
    <a href="" ng-click="clasClick()">Classic Click</a>
  </accordion-group>
  <accordion-group heading="Nested Accordian (2)" is-open="$parent.step2">
    <accordion close-others="oneAtATime">
      <accordion-group heading="Test (3)" is-open="$parent.$parent.$parent.step3">
        <a href="" ng-click="$parent.$parent.$parent.nestClick()">Nested Click</a>
      </accordion-group>
    </accordion>
  </accordion-group>
</accordion>

Upvotes: 1

Related Questions