How to add a class to ng-click from layout?
Here is the page layout:
<li class="dropdown">
<ul class="submenu">
<li ng-click="SetActiveMenuForPersonalInfo();">
<a href="../Account/#/PersonalInfo">@Translate("MY_ACCOUNT")<a>
</li>
</ul>
</li>
When the user clicks on my account they get this: http://plnkr.co/edit/gJko3umteXXEye7o9StR?p=preview
This is the function in the controller:
$scope.SetActiveMenuForPersonalInfo = function () {
$scope.activeMenu = 'Settings';
$scope.activeLink = "PersonalInfo";
console.log("Active menu: ",$scope.activeMenu);
}
How can I change $scope.activeMenu
and $scope.activeLink
when the user clicks "My Account" which is in the layout? The console prints "Settings" for $scope.activeMenu
, so it means it's in functions, but nothing happens. Maybe because I put $scope.activeMenu
in a function?
source to share
Your plnkr is missing the css for the active link and I wrapped the clicked link assignment in a function.
Check out this updated plnkr.
The function is pretty simple:
$scope.changeActiveLink = function(link) {
$scope.activeLink = link;
}
The links will now be green when clicked. Is this what you wanted? Well, maybe a different color, but the principle is the same.
If you want to remove the green color when you click "contact" or "about", you can wrap them in a function that looks like this:
$scope.changeActiveMenu = function(menu) {
if($scope.activeMenu == 'Settings' && menu != 'Settings') {
$scope.activeLink = '';
}
$scope.activeMenu = menu;
}
Update
Finally, I understand what you mean. By clicking on the link, you change the view, thereby re-instantiating your controller. This is why activeMenu is empty. If you create a service and save the currently active menu there, it won't be empty.
I've updated plnkr to include the service. I can't fully test it as I don't have the entire project code, but with that as a guide, you should be able to make it work!
source to share
Have you tried to stop the spread of the event? If it doesn't work this way, try adding it to the children.
$scope.SetActiveMenuForPersonalInfo = function ($event)
{
$event.stopPropagation();
$scope.activeMenu = 'Settings';
$scope.activeLink = "PersonalInfo";
console.log("Active menu: ",$scope.activeMenu);
}
source to share