All geek questions in one place

AngularJS dynamically sets a class in a route-based <html> tag

I'm not sure how best to approach this.

I want to dynamically set the class on my /login route so that my login page can have a large background image.

What is the best way to approach this?

Here is my current code:

 <!DOCTYPE html> <html class="SOME_DYNAMIC_CLASS_HERE_BASED_ON_ROUTE"> ... </html> <body ng-app="myApp"> <div ng-view=""></div> </body> angular.module('myApp', ['ngRoute']).config(function ($routeProvider) { $routeProvider .when('/login', { templateUrl: 'login.html', controller: 'LoginCtrl' }) .when('/', { templateUrl: 'dashboard.html', controller: 'DashboardCtrl' })
+6
source share
3 answers

You must have your ng-app attached in the <html> element in order to have any connection between angular and view. Since you want something to change to the current route of your application, why not use these routes as a reference for your configuration, for example. $routeProvider configurations. Attach your entire configuration, including configuration from classes to styles, or any other configuration in the route object. Then you can create a directive that will listen for route changes using $routeChangeSuccess , and then get the current route and other properties using the $route object defined as the second parameter of the $routeChangeSuccess , after you have these properties, you can do whatever you want with it, eg add a class to this element of the directive.

Demo

Javascript

Configuration

  .config(function ($routeProvider) { $routeProvider .when('/dashboard', { templateUrl: 'dashboard.html', 'class': 'bg-dashboard' }) .when('/login', { templateUrl: 'login.html', 'class': 'bg-login' }) .otherwise({redirectTo: '/login'}); });

Directive

  .directive('classRoute', function($rootScope, $route) { return function(scope, elem, attr) { var previous = ''; $rootScope.$on('$routeChangeSuccess', function(event, currentRoute) { var route = currentRoute.$$route; if(route) { var cls = route['class']; if(previous) { attr.$removeClass(previous); } if(cls) { previous = cls; attr.$addClass(cls); } } }); }; });

HTML

 <html ng-app="myApp" class-route>...</html>
+6
source

Using the directive is one way.

 .directive("routeClass", function($location, $parse) { var mapping = {}; return { restrict: "A", scope: {}, link: function(scope, element, attrs) { mapping = $parse(attrs["routeClass"])(scope); // do something with mapping and $location or $routeParams } } }); <any route-class="{'/': 'default', '/Book': 'book'}" />

Another is to install it via $rootScope .

0
source

I know this is an old thread, but I came across it looking for some pointers. I went for the following method, which feels more "Angular". Please note: it uses the controllerAs directive:

 ngModule.directive('routeClass', routeClass); function routeClass($state, $log) { function controllerFn($scope) { var routeClass = this; $scope.$on('$stateChangeSuccess', function(){ // I have a different class name assignment as the // setup of my states is relatively complex, // but this should demonstrate the idea routeClass.current = 'page-' + $state.current.name; }); } return { controller: controllerFn, controllerAs: 'routeClass', restrict: 'A' }; }

And it is used in index.html as follows:

 <body ng-app="app" route-class ng-class="{{routeClass.current}}">
0
source

Source: https://habr.com/ru/post/977862/

More articles:


All Articles