AngularJS: Load CSS based on data retrieved from the controller

Question

I'm trying to load specific CSS file using AngularJS controller.

HTML code looks like

<html lang="en" ng-app="CPCplusLunchLink" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <script src="js/lib/angularjs/angular.min.js"></script>
    <script src="js/lib/angularjs/angular-route.min.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers/main.js"></script>
    <script src="js/controllers/events.js"></script>
    <script src="js/services/events.js"></script>
    <link rel="stylesheet" ng-href="css/{{ css }}.css">

app.js related part

    .when('/', {
        templateUrl: 'views/home.html',
              controller: 'EventsController'
    })

mainContorller

myApp.controller('mainController', ['$scope', function($scope){


    // set the default css
    $scope.css = 'style';

}]);

and controller where I have set value for the CSS

myApp.controller('EventsController', ['$scope','events','$rootScope', function($scope, events, $rootScope){

// set dedicated CSS
$rootScope.css = 'style2';

    events.then(function(data) {
        $scope.eventsList = data.evets;

        console.log($scope.eventsList);
    });

}]);

but I'm not able to change default CSS value based on loaded controller.

Any clue what I have missed?

Maybe try using ng-src. But I dont think u can load css like this.Check out stackoverflow.com/questions/17695156/… — Vivz
– Vivz, Commented Aug 11, 2017 at 14:18
@Vivz I have tried to follow c-sharpcorner.com/blogs/… and scotch.io/tutorials/… — JackTheKnife
– JackTheKnife, Commented Aug 11, 2017 at 14:21
I just went through it and realized that you have to let angular know about the controller before you place the css — Vivz
– Vivz, Commented Aug 11, 2017 at 14:24

Vivz · Accepted Answer · 2017-08-11 14:23:58Z

2

You have to let angular know about the dynamic CSS variable which is defined inside the controller. So you have to define the controller on HTML tag

<html lang="en" ng-app="myApp" ng-controller="EventsController">

answered Aug 11, 2017 at 14:23

Vivz

6,6282 gold badges19 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

bresleveloper Over a year ago

yep, example just for that here c-sharpcorner.com/blogs/…

JackTheKnife Over a year ago

@viz CSS I want to change using EventsController only for that particular view (home page only) and have it set to default for other views

Vivz Over a year ago

Do you have a main controller apart from the partial ones? Try setting the variable on $rootScope or on $scope.$parent

JackTheKnife Over a year ago

@Viz No, unfortunately I don't. I will check that option and report back.

JackTheKnife Over a year ago

OK. I think I need to user $rootScope in both controllers and then do $rootScope.$apply(); in my EventsController to bind it

Collectives™ on Stack Overflow

AngularJS: Load CSS based on data retrieved from the controller

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related