I have some html like this (I won't even bother to post the JS since it's an overcomplicated mess):
<html>
<body>
<div class="container">
<h3 class="text-center">Administration</h3>
</div>
<div class="form-inline text-center">
<div class="form-group">
<label>Managing Business</label>
<select ng-options="business.name for business in businesses" ng-model="managingBusiness" class="form-control restaurant-select"></select>
<label>Program</label>
<select ng-options="program.description for program in selectablePrograms" ng-model="managingProgram" class="form-control restaurant-select"></select>
</div>
</div>
<hr/>
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked">
<li ng-class="{ active: isActive('/admin/overview')}"><a href="#/admin/overview">Overview</a></li>
<li ng-class="{ active: isActive('/admin/generators')}"><a href="#/admin/generators">Generators</a></li>
</ul>
</div>
<div class="col-md-10">
<div ng-include="'views/partials/admin/overview.html'" ng-show="isActive('/admin/overview')"></div>
<div ng-include="'views/partials/admin/generators.html'" ng-show="isActive('/admin/generators')"></div>
</div>
</body>
</html>
And the only js that matters is this:
$scope.isActive = function (viewLocation) {
return viewLocation === $location.path();
};
And the issue is that when the user selects a tab to change (overview/generators) than the entire page is reloaded. This is bad because I am trying to keep the state of the selected business at the top.
What am I doing wrong? Why is the page reloading without me running a reload command?
$location.path(). However, you haven't even listed which angular version you are using here. Besides that, what you are showing here is an anti-pattern anyway; you should be using a router or a state machine likengRouteorui-routerfor this instead. – Claies Oct 24 '16 at 18:23ng-viewhttps://docs.angularjs.org/api/ngRoute/directive/ngView – 0_0 Oct 24 '16 at 18:26