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.');
}
});
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
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