dferrar dferrar - 6 months ago 16
AngularJS Question

AngularJS $route nav highlighting not working

I am using Angular $route for nav highlighting, but the highlighting does not show. Here is the code for the navigation...

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body ng-app="myApp">

<div ng-controller="myController" class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li ng-class="{active: $route.current.activetab == 'home'}"><a href="index.html">Home</a></li>
<li ng-class="{active: $route.current.activetab == 'audio'}"><a href="audio">Audio</a></li>
<li ng-class="{active: $route.current.activetab == 'bio'}"><a href="bio">Artist Bio</a></li>
<li ng-class="{active: $route.current.activetab == 'contact'}"><a href="contact">Contact</a></li>
</ul>
</div>

</body>
</html>


Here is the code for the AngularJS controller with $route...

app.controller("myController", function($scope,$http, $route) {
$http.post('myform.php')
.then(function successCallback(response){
$scope.detail = response.data;
if($scope.detail){
console.log("success");
} else{
console.log("no data");
}
}, function errorCallback(response) {
console.log("error");
});
$scope.$route = $route;
});

Answer

Did you include the js library?

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>

Did you inject ngRoute into your angular module?

var app = angular.module("myApp", ['ngRoute']);
Comments