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

杰克刀

我正在尝试使用 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 值。

任何线索我错过了什么?

维兹

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章