How to detect if the div (accordion) is being clicked?

Question

I'm trying to detect if my accordion is clicked when user click the accordion.

I found this post: Handle open/collapse events of Accordion in Angular, but my markup is like:

<accordion id='accordion' close-others="false">
    <accordion-group is-open="false">
        <accordion-heading>
            title
        </accordion-heading>
        <div>
            <div>
                Cat ipsum dolor sit amet, find something else more interesting all of a sudden go crazy, 
            </div>
        </div>
    </accordion-group>
    <accordion-group is-open="false">
        <accordion-heading>
            title 2
        </accordion-heading>
        <div>
            <div>
               second contents.
            </div>
        </div>
    </accordion-group>
</accordion>

My controller:

.controller('Ctrl', ['$scope', function ($scope) {
    //I want to detect if the user click the accordion based on the is-open attribute.
    console.log($scope.is-open) //it doesn't return anything..
}]);

How do I do this?

Alex Choroshin · Accepted Answer · 2014-03-27T23:13:16.917

3

When you bind object to is-open attribute on the accordion-group you need to use $parent since the accordion directive creates it's own child scope so when binding an object from outside the accordieon directive use $parent .

Example:

<div ng-controller="AccordionDemoCtrl">
 <accordion id='accordion' close-others="false">
             <accordion-group is-open="$parent.isopen">
                 <accordion-heading>
                    title
                 </accordion-heading>
                <div>
                    <div>
                        Cat ipsum dolor sit amet, find something else more interesting all of a sudden go crazy, 
                    </div>
                </div>
            </accordion-group>
</accordion>
</div>

js:

function AccordionDemoCtrl($scope) {
  $scope.$watch("isopen", function(isOpen){
      if (isOpen) {
        console.log("Opened");
      }
  });
}

Live example: http://plnkr.co/edit/2aElCT?p=preview

Update:

Live example for dynamic accordion groups (example by pkozlowski.opensource) : http://plnkr.co/edit/OYD7vz?p=preview

edited Mar 27 '14 at 23:13

answered Mar 27 '14 at 22:11

Alex Choroshin

6,177
2
28
36

1

Thanks, but what happen if I have 2 accordion-group. When I click one accordion title both accordion will open +1 – Links Mar 27 '14 at 22:28
this was only an example you can always attach an array object like in the example you added. – Alex Choroshin Mar 27 '14 at 22:35
Sorry Alex, I am not sure what you mean – Links Mar 27 '14 at 22:44
I thought you wanted an example for the markup you added. so the next question is, are you planing to create accordion-group dynamically? – Alex Choroshin Mar 27 '14 at 22:53
I have 3 accordion-groups so far and I need know when each of them is being clicked. $parent.isOpen will open all 3 accordions when I only click one accordion. plz see the updated codes – Links Mar 27 '14 at 22:59
so if you only have 3 accordion-groups you can always add 3 watches,for opena, openb openc, of-course it's not the nicest solution but it works. – Alex Choroshin Mar 27 '14 at 23:04
It works, but is there anyway to do it dynamically? I have different numbers of accordion group all the time. thanks soooo much – Links Mar 27 '14 at 23:08
that's why earlier I asked if you need this to be dynamic or not, any way I updated my answer with a dynamic example :) – Alex Choroshin Mar 27 '14 at 23:12

score 1 · Answer 2 · answered Mar 27 '14 at 21:36

1

You can't use the minus sign in your object (dot) notation because it's treated like ($scope.is) - (open), try $scope['is-open'] instead. Or ideally, avoid it and use camelCase.

answered Mar 27 '14 at 21:36

Shomz

37,421
4
57
85

is-open is the defaul attribute from bootstrap accordion. I used $scope['is-open'] and it's undefined +1 – Links Mar 27 '14 at 21:41
Yes, I was referring more to JS in general (the same rules apply here). But, related to the accordion, did you notice in the accepted answer how they are watching/listening to the accordion state changes? I think you could apply something like that. – Shomz Mar 27 '14 at 21:47
I've never worked with the accordion, but it seems that the is-open attribute is assigned a scope variable, and that's what you should be listening to, not the attribute itself. But again, I might be wrong. – Shomz Mar 27 '14 at 21:49

How to detect if the div (accordion) is being clicked?

2 Answers2