Angular rootScope not visible in template

Question

I change the class on my <body> element, depending on which $state my website is currently showing.

I say <body class="{{specialClass}}">, where specialClass is a variable of $rootScope. This variable is set in run block of my main app module:

angular.module("main", [dependencies])
    .run(function($rootScope) {
    $rootScope.$on('$stateChangeSuccess', function(event, currentState){
        switch (currentState.name) {
            case "about":
                console.log("I'm on landing page, set specialClass in $rootScope");
                $rootScope.specialClass = 'landing-page';
                break;
            default:
                $rootScope.specialClass = '';
                break;
        }
    })
});

For some reason, my template doesn't see specialClass variable, so the class attribute is empty. At the same time, "I'm on landing page, set specialClass in $rootScope" shows up.

What's wrong?

My full index.html template:

<html>
    <head>
        <base href="/">
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>My project</title>
    </head>
    <body ng-app="main" class="{{specialClass}}">
        <ui-view>
            This is my application.
        </ui-view>
    </body>
</html>

What's even more crazy is when I serve frontend in development with Webpack dev server, it works ok, the class is switched. But when I serve this in production with Django, it is not. Console output is present in both cases.

in which tag you bootstrap your application?? the ngApp directive must contain the body tag. — Hitmands
– Hitmands, Commented Apr 27, 2016 at 10:55
@Hitmands Good point. ngApp directive is applied to the body tag. It is in fact: <body ng-app="main" class="{{specialClass}}">. — Boris Burkov
– Boris Burkov, Commented Apr 27, 2016 at 11:06
@SalathielGenèse well, the template is generated by Webpack and put into the templates folder of Django backend. I've edited the question and added it. Webpack inserts scripts and styles into that template. — Boris Burkov
– Boris Burkov, Commented Apr 27, 2016 at 11:11

Salathiel Genese · Accepted Answer · 2016-04-27 11:23:53Z

according to ngClass about array syntax, I try this in my own app:

(() =>
{
    'use strict';
    angular.module('app', [/**'ng-routing'**/])
    .run(['$rootScope', function($rootScope)
    {
        // $rootScope.specialClass = ''; // no need, since an empty string is falsy as well as undefined OR null
        $rootScope.$on('$stateChangeSuccess', function(event, currentState)
        {
            switch (currentState.name)
            {
                case "about":
                    $rootScope.specialClass = 'landing-page';
                    break;
            }
        });
    }]);
})();

...

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" ng-app="app" ng-cloak ng-strict-di>
    <head>
        <meta charset="utf-8">
        <title>{{app.title}}</title>
        <script src="web/libs/jquery/dist/jquery.js"></script>
        <script src="web/libs/angular/angular.js"></script>
        <script src="web/js/javascript.js"></script>
    </head>
    <body ng-class="[specialClass]">
    </body>
</html>

Collectives™ on Stack Overflow

Angular rootScope not visible in template

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related