Menu
I'm trying to find an elegant way to have a custom dynamically class of the body tag that I can set easily from the ui-router configurations and if none is set, I can use a default option or none.
Example:
routes.js
$stateProvider
.state('login', {
url: "/login",
template: 'Login'
})
.state('register', {
url: "/register",
template: 'Register'
}).
.state('profile', {
url: "/profile",
template: 'Profile'
});;
Simple markup HTML
<html>
<body class=""> <!-- Dynamically class to change -->
<div ui-view></div>
</body>
</html>
Scenario:
1 - Visiting the state login I should have the class of the body equals to auth
2 - Visiting the state register at this point it will have the same auth class
3 - Visiting the state profile the body will have the default class or none
How do you achieve that?
363
You can have a master AppController that controls this:
<html ng-app="app" ng-controller="AppController as appController">
...
<body class="{{ appController.bodyClasses }}">
Inside AppController:
var vm = this;
vm.bodyClasses = 'default';
// this'll be called on every state change in the app
$scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
if (angular.isDefined(toState.data.bodyClasses)) {
vm.bodyClasses = toState.data.bodyClasses;
return;
}
vm.bodyClasses = 'default';
});
Inside your route defs:
.state('register', {
url: "/register",
template: 'Register',
data: {
bodyClasses: 'auth'
}
});
See UI Router documentation for more on this data-attribute strategy.
120
Here's a similar approach as @jmq's using state data, but implemented as a directive instead of a controller. (The nice thing about the directive is you can apply this to any arbitrary elements)
Example Markup
<body ng-app="app" route-css-classnames>
Routes Config (routes.js)
$stateProvider
.state('login', {
url: "/login",
template: 'Login',
data : {
cssClassnames : 'auth'
}
})
.state('register', {
url: "/register",
template: 'Register',
data : {
cssClassnames : 'auth'
}
}).
.state('profile', {
url: "/profile",
template: 'Profile'
});
Directive (routeCssClassnames.js)
(function () {
'use strict';
angular.module('shared').directive('routeCssClassnames', routeCssClassnames);
function routeCssClassnames($rootScope) {
return {
restrict: 'A',
scope: {},
link: function (scope, elem, attr, ctrl) {
$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
var fromClassnames = angular.isDefined(fromState.data) && angular.isDefined(fromState.data.cssClassnames) ? fromState.data.cssClassnames : null;
var toClassnames = angular.isDefined(toState.data) && angular.isDefined(toState.data.cssClassnames) ? toState.data.cssClassnames : null;
// don't do anything if they are the same
if (fromClassnames != toClassnames) {
if (fromClassnames) {
elem.removeClass(fromClassnames);
}
if (toClassnames) {
elem.addClass(toClassnames);
}
}
});
}
}
}
}());
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
