I'm looking to dynamically add classes outside of the current scope. Specifically, I need to add classes to the header, main, and footer elements as shown below:
<header class="{{pageClass}}"></header>
<main class="{{pageClass}}" ng-view></main>
<footer class="{{pageClass}}"></footer>
Below is my routing configuration along with the corresponding controllers:
app.config(function($routeProvider) {
$routeProvider
.when('/chapter/:title', {
templateUrl: 'article.html',
controller: 'article'
})
.when('/search', {
templateUrl: 'search.html',
controller: 'search'
})
.otherwise({
redirectTo: '/search'
});
});
app.controller('article', function($scope) {
$scope.pageClass = 'normal';
});
app.controller('search', function($scope) {
$scope.pageClass = 'small';
});
I want to assign the class 'normal' when a user opens an article and 'small' when they visit the search page. This way, each of the three tags (header, main, and footer) will always have a specific class based on the routing used.
Overall, the goal is to provide different styling based on the routing path. I hope this explanation clarifies my objective.