I recently built a web application for educational purposes.
If you're interested, you can check out the app here: https://github.com/Yannic92/ShoppingList
I've encountered an issue while working with Angular and its scopes. In my index.html (https://github.com/Yannic92/ShoppingList/blob/master/src/main/resources/public/index.html), I have a navbar. Initially, I attempted to place this navbar in a separate HTML file and use ng-include to include it, as I wanted to keep my index.html clean.
Initial Approach
This is how my index.html looked:
<html ng-app="shopping">
<head lang="de">
...
<title>Einkaufsliste</title>
</head>
<body ng-controller="navigation">
<navbar class="navbar-default navbar-fixed-top" ng-include="'navigation/navigation.html'"></navbar>
<div class="content col-md-offset-1 col-md-10 col-lg-offset-2 col-lg-8" ng-view></div>
</body>
</html>
The code snippet for the navbar that currently resides inside the <navbar> element on my GitHub page was initially placed in navigation/navigation.html. To collapse the navbar when clicking on a link, I included the following code in the navigation-controller (https://github.com/Yannic92/ShoppingList/blob/master/src/main/resources/public/navigation/navigation.js):
$scope.$on('$routeChangeSuccess', function () {
$scope.navCollapsed = true;
})
The code seemed to work, but surprisingly, it didn't actually collapse the navbar as intended.
After moving the contents of navbar.html directly into index.html, everything started working smoothly. This made me suspect that the issue might be related to the scope of Angular's controller.
Could someone provide some guidance on how I could keep my navbar in navigation.html while still being able to toggle its collapsed status from within the controller?