AngularJS：基於從控制器檢索到的數據加載CSS

我試圖使用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值。

任何線索我錯過了什麼？

來源

2017-08-11 JackTheKnife

也許嘗試使用ng-src。但我不認爲你可以加載像這樣的CSS。查看https://stackoverflow.com/questions/17695156/angular-js-load-css-and-js-files-dynamically – Vivz

@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

我剛剛經歷了它，並意識到你必須讓角度知道有關控制器之前，你把css – Vivz

您必須讓角度知道在控制器內定義的動態CSS變量。所以你必須在HTML標籤上定義控制器

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

來源

2017-08-11 14:23:58 Vivz

是，只是爲了這個例子http://www.c-sharpcorner.com/blogs/ load-css-theme-dynamic-on-user-selection -in-angularjs122 – bresleveloper

@viz CSS我想改變使用EventsController只爲該特定的視圖（僅限主頁），並將其設置爲默認的其他視圖 – JackTheKnife

你有一個主要的控制器除了部分的？嘗試在$ rootScope或$ scope上設置變量。$ parent – Vivz

AngularJS：基於從控制器檢索到的數據加載CSS

回答

相關問題