How to programmatically stop Angular UI accordion from opening on click

Question

Basically I'd like to do some validation before an accordion opens and I do not want an additional button in the header. So let's say someone clicks on the accordion header and instead of closing (it was originally open), I'd like to add some conditional code, if certain circumstances are not met, the the accordion won't move/change/close.

I've tried adding a ng-click="stop()" where stop() has $event.stop = function (e) {e.stopPropagation();} and it didn't work.

I've also tried ng-click="$event.stopPropagation" but also didn't work.

Please note that I've changed the directive and instead of the title only (h4) being clickable, the whole accordion header is clickable.

If I add a button inside the header and attach the e.stopPropagation on it, it'll work, but that's not what I want.

Is it possible?

Answer 1

accordion of angular ui also uses the directive collapse(when your template s loaded verify the DOM you ll find it on the accordion description of all your accordion rows) to decide if the accordion contents is open or not. So your problem can be solved if you can access the scope of the accordion directive. For this i can see 2 ways

Either you make a small change in collapse template of Angular-ui .. i.e. pass 2 parameters 1.to decide if collapse should be done depending on some validation or not 2.a controller variable which you would set to true after all your validation are done

inside the collapse directive apply a watch on variable 2 and you set this variable true after you have done all your validations and when it is true the collapse directive will continue and all this custom workflow should happen only if you set variable 1 as TRUE and if variable 1 is false then none of the above happens i.e. no validations are awaited.

second scenario:

if your accordion has 4 rows i.e. A,B,C,D then

$scope.$$childHead.$$childHead

gives you access to A, now you want the scope of collapse directive which has been inserted by angular accordion template so go down to this

 $scope.$$childHead.$$childHead.$$childHead.isOpen

this isOpen variable is a boolean value to collapse directive this variable decides if your accordion is open or not and it is isolated i.e. B,C and D also have their own isOpen

to access isOpen of B do:

$scope.$$childHead.$$childHead.$$nextSibling.isOpen

for C

 $scope.$$childHead.$$childHead.$$nextSibling.$$nextSibling.isOpen

and so on. Apply watches on these isOpen variables and prevent them from being true till your validations are done! But the second approach might not be the best suited case, if you want validations on only particular rows then it might work well still check what suits you.