AngularJS：根据从控制器检索到的数据加载 CSS

Question

我正在尝试使用 AngularJS 控制器加载特定的 CSS 文件。

HTML 代码看起来像

<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 相关部分

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

主控制器

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


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

}]);

和我为 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);
    });

}]);

但我无法根据加载的控制器更改默认 CSS 值。

我错过了什么线索吗？

Answer 1

您必须让 angular 知道控制器内部定义的动态 CSS 变量。所以你必须在 HTML 标签

上定义控制器

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

AngularJS：根据从控制器检索到的数据加载 CSS

AngularJS: Load CSS based on data retrieved from the controller

angularjs

angularjs-directive