My website contains ng-view partials that change based on routing updates in $routeProvider.
anmSite.config(function($routeProvider, $locationProvider){
$locationProvider.html5Mode(true);
$routeProvider
//Home page route
.when("/", {
templateUrl: "templates/main.html",
controller: "imageController",
title: "Passionate about perfection",
})
//About page route
.when("/me", {
templateUrl: "templates/me.html",
controller: "imageController",
title: "About Me",
})
//Design page route
.when("/design", {
templateUrl: "templates/design.html",
controller: "imageController",
title: "Site Design",
})
//Projects page route
.when("/projects", {
templateUrl: "templates/projects.html",
controller: "imageController",
title: "Projects",
})
//Photos page route
.when("/photos", {
templateUrl: "templates/photos.html",
controller: "imageController",
title: "Photos",
})
//Default route to /
.otherwise({
redirectTo: "/"
});
});
All routes use the 'imageController', which updates the $scope based on $location.path().
anmSite.controller("imageController", function($scope, $location){
var image = {
class: "",
text: ""
};
var imageClass, imageText = "";
switch($location.path()){
case "/me":
image.class = "me";
image.text = "Me";
break;
case "/design":
image.class = "design";
image.text = "Design";
break;
case "/projects":
image.class = "projects";
image.text = "Projects";
break;
case "/photos":
image.class = "photos";
image.text = "Photos";
break;
default:
image.class = "surfer";
image.text = "Surfer";
break;
}
$scope.image = {
class: image.class,
text: image.text
};
});
In index.html, I have added a div above the ng-view section, containing 2 $scope variables that need to be updated for each route.
<div ng-controller="imageController">
<div class="image-container {{ image.class }}">
<h1>{{ image.text }}</h1>
</div>
</div>
<div class="ng-view"></div>
The initial page load works fine, but the ng-controller div does not update with each route change, even though the $scope variables are updated (confirmed with console.log). Is there a way to refresh the ng-controller view? Should I use other Directives? Any suggestions would be appreciated.