Angularjs toggle panel & sub-panel controls - angularjs

Question

there are multiple panels and sub-panels (DIVs), that i need to show its (panel) controls on click to do specific tasks. The project is cv builder with front-end editing capabilities. So in regard to show/hide panels, my approach is very basic so hoping there would be much better way to getting this done.
Here is HTML Markup
<div class="panel component-about" ng-class="{'active': aboutPanel}" ng-click="activePanelAbout()">
<h2 class="title">Some Title (input)</h2>
<div class="panel-body">
Some text (textarea)
</div>
<div class="panel-hover-controls">
<span class="fa fa-pencil"></span>
<span class="fa fa-cog"></span>
<ul class="panel-dropdown" ng-class="{'active': aboutToggle}">
<li><label class="input-switch"><input type="checkbox" ng-model="aboutTitleShow" ><span class="slider round"></span></label> Show Title</li>
</ul>
</div>
</div>
<div class="panel component-experience" ng-class="{'active': expPanel}" ng-click="activePanelExp()">
<h2 class="title">Some Title (input)</h2>
<div class="panel-body">
<ul class="panel-componenets">
<li ng-repeat>
Title
Content
</li>
</ul>
</div>
<div class="panel-hover-controls">
<span class="fa fa-pencil"></span>
<span class="fa fa-cog"></span>
<ul class="panel-dropdown" ng-class="{'active': aboutToggle}">
<li><label class="input-switch"><input type="checkbox" ng-model="aboutTitleShow" ><span class="slider round"></span></label> Show Title</li>
</ul>
</div>
</div>
<div class="panel component-skills" ng-class="{'active': skillsPanel}" ng-click="activePanelSkills()">
<h2 class="title">Some Title (input)</h2>
<div class="panel-body">
<ul class="panel-dropdown" ng-class="{'active': aboutToggle}">
<li><label class="input-switch"><input type="checkbox" ng-model="aboutTitleShow" ><span class="slider round"></span></label> Show Title</li>
</ul>
</div>
<div class="panel-hover-controls">
<span class="fa fa-pencil"></span>
<span class="fa fa-cog"></span>
<ul class="panel-dropdown" ng-class="{'active': aboutToggle}">
<li><label class="input-switch"><input type="checkbox" ng-model="aboutTitleShow" ><span class="slider round"></span></label> Show Title</li>
</ul>
</div>
</div>
Further please check markup figure in (below) screenshot.
In reference to attached screenshot, there are multiple panel sections and most of panels also have sub-panels and each panel has its own control type which need to be show on click.
Here is JS (Controller)
// for setting popups
$scope.aboutToggle = false;
$scope.expToggle = false;
$scope.skillToggle = false;
// about panel
$scope.activePanelAbout = function() {
$scope.aboutPanel = true;
$scope.expPanel = false;
$scope.skillPanel = false;
}
// experience panel
$scope.activePanelExp = function() {
$scope.aboutPanel = false;
$scope.expPanel = true;
$scope.skillPanel = false;
}
// skill panel
$scope.activePanelSkill = function() {
$scope.aboutPanel = false;
$scope.expPanel = false;
$scope.skillPanel = true;
}
Now i think the picture should be clear. The panels are toggling actually, but i require more better approach something like this that we use to do in javascript/jquery.
I hope i have covered all aspects of my question, if not please do guide me so i can clarify myself. I'm looking forward for your guidance.
Thanks in advance.

Answer 1

this in AngularJS ends up a bit different than plain old JS. Since a controller contains its own $scope in relation to the DOM of which the controller is instantiated, this doesn't always refer to the object that calls a function, etc. So I can think of two options:
First maybe simplify how you're changing the active class for each panel and it's children. So maybe just:
$scope.activePanel = "";
$scope.ChangeActivePanel = function(newPanel) {
$scope.activePanel = newPanel;
}
And then change the ng-class for each panel to ng-class="{'active': activePanel == 'about'}" or ng-class="{'active': activePanel == 'skills'}", etc. Then change ng-click on the panels to ng-click="ChangeActivePanel('about')" or whatever to update the variable. In all honesty, just ng-click="activePanel = 'about'" would work but the ChangeActivePanel function could be expanded to handle behavior of the children panel elements as well. Just a thought rather than having three different functions and toggling all of these variables.
Second option is to create controllers for each panel by declaring ng-controller="aboutController" or ng-controller="skillsController" to each panel and then each panel would have it's own $scope but you'll have to declare and attach each controller to the app module and you'll run into headaches if you need to share data across controllers and will have to use factories/services, etc. I think that's overkill for something like this. Plus, it's difficult to manage which $scope is which across multiple controllers within the same view.
Hopefully this gives you something to work with.