angular - element to reflect which template is loaded to a view

Question

I have a simple app using ngRoute: it has a view that loads different templates depending on the URL (#/1 => first template; #/2 => second template). I added 'a' elements to switch between these templates.

Is it possible to make the 'a' elements reflect the selected template? (e.g. to change their class depending on the current url).

<html ng-app="app">
    <a href='#/1'>one</a>
    <a href='#/2'>two</a>
    <div ng-view />
</html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-route.min.js"></script>
<script>
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider) {
    $routeProvider.when('/1', {template: 'first template'});
    $routeProvider.when('/2', {template: 'second template'});
    $routeProvider.otherwise({redirectTo: '/1'});
});
</script>

score 0 · Accepted Answer · edited May 23 '17 at 12:06

0

Take a look at the answer provided over at https://stackoverflow.com/a/18562339/665868 which in essence pretty much is what Vucko suggests.

In my above linked SO question there are a bunch of different proposed solutions and you can really pick what suits you needs and level of complexity.

edited May 23 '17 at 12:06

Community

1
1

answered Jan 31 '15 at 19:44

mengstrom

233
3
13

angular - element to reflect which template is loaded to a view

1 Answers1