2017-08-11 110 views
0

我试图使用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' 
    }) 

mainContorller

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值。

任何线索我错过了什么?

+1

也许尝试使用ng-src。但我不认为你可以加载像这样的CSS。查看https://stackoverflow.com/questions/17695156/angular-js-load-css-and-js-files-dynamically – Vivz

+0

@Vivz我试图遵循http: //www.c-sharpcorner.com/blogs/load-css-theme-dynamically-on-user-selection-in-angularjs122和https://scotch.io/tutorials/use-angularjs-and-nghref-to-抓住CSS动态 – JackTheKnife

+0

我刚刚经历了它,并意识到你必须让角度知道有关控制器之前,你把css – Vivz

回答

2

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

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

是,只是为了这个例子http://www.c-sharpcorner.com/blogs/ load-css-theme-dynamic-on-user-selection -in-angularjs122 – bresleveloper

+0

@viz CSS我想改变使用EventsController只为该特定的视图(仅限主页),并将其设置为默认的其他视图 – JackTheKnife

+0

你有一个主要的控制器除了部分的?尝试在$ rootScope或$ scope上设置变量。$ parent – Vivz

相关问题