Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angularjs rootscope not updating ngClass

I'm pretty sure it's something stupid again. I'm learning angularjs so I don't get the full scope yet but I'm getting there. I tried everything and really searched for anything I could find but nothing seemed to work.

I'm trying to do a ng-class="..." in my layout file but the expression is set in my controller but somehow it's not rendered. It is rendered when I put it in my ng-view file. I get that he only renders part of the file but I want him to render the ng-class on ng-view as well. Is this possible or is it easier to just put in a div inside the partial html file.

Simple html file

<body>
<ng-view ng-class="{ 'splash': splash=='splash' }"></ng-view>
</body>

My controller

angular.module('xxx.splash')
    .controller('IndexCtrl', function($scope, $rootScope, config) {
        $rootScope.splash = 'splash';

        $scope.login = function(e) {
            alert('Soon. How soon? Very soon.');
        }
    });
like image 442
wardpeet Avatar asked Jun 19 '13 21:06

wardpeet


1 Answers

When you define a variable in the root scope, you can't access it in the same way as you define it in the local scope. $rootScope variables can be accessible in the AngularJS templates using $root.<variableName>, so your HTML file should be changed to this:

<body>
<ng-view ng-class="{ 'splash': $root.splash=='splash' }"></ng-view>
</body>

You can see the diffrence of $scope and $rootScope in this demo

like image 121
Alireza Ahmadi Avatar answered Oct 07 '22 07:10

Alireza Ahmadi