Angular的動態CSS

嗨我網站上有3種語言，其中一個有從右向左的字母，所以當我更改語言時，我需要動態更新css。不知道該怎麼做。問題是：我有ng-view，它有語言，我在那裏更改語言，我有HeadController用於整個文檔，當我在ng-view中更改語言時，我的Head控制器看不到這些更改。這裏我的索引：Angular的動態CSS

<!doctype html> 
<html lang="en" ng-app="ow" ng-controller="HeadCtrl"> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=100%, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/> 
     <title>OW</title> 
     <link ng-repeat="stylesheet in stylesheets" ng-href="{{stylesheet.href}}" type="{{stylesheet.type}}" rel="stylesheet" /> 
     <script src="lib/angular/angular.min.js"></script> 
     <script src="lib/jquery-1.9.1.min.js"></script> 
     <script src="js/main.js"></script> 
     <script src="js/app.js"></script> 
     <script src="js/controllers.js"></script> 
    </head> 
    <body class="fontMain"> 
     <div ng-view></div> 
    </body> 
</html>

和app.js

angular.module('ow', []). 
config(['$routeProvider', function($routeProvider) { 
$routeProvider. 
    when('/:placeId', {templateUrl: 'partials/menu.html', controller: MenuCtrl}). 
    when('/menu/:itemId', {templateUrl: 'partials/menu-details.html', controller: MenuItemCtrl}). 
    when('/look/refill', {templateUrl: 'partials/refill.html', controller: RefillCtrl}). 
    when('/look/orderCart', {templateUrl: 'partials/orderCart.html', controller: OrderCartCtrl}). 
    when('/lang/:lang', {templateUrl: 'partials/menu.html', controller: LangCtrl}). 
    otherwise({redirectTo: '/0'}); 
}]).controller("HeadCtrl", function($scope, sharedData) { 
    if (sharedData.getLang() == "he") { 
     $scope.stylesheets = [ 
      {href: "css/base.css", type: "text/css"}, 
      {href: "css/right.css", type: "text/css"} 
     ]; 
    } 
    else { 
     $scope.stylesheets = [ 
      {href: "css/base.css", type: "text/css"}, 
      {href: "css/left.css", type: "text/css"} 
     ]; 
    } 
});

sharedData - 包含共同的價值觀

這裏語言控制器：

// Controller for language changes 
function LangCtrl($routeParams, $location, sharedData, $scope) { 
    sharedData.setLang($routeParams.lang); 
    $location.path("/"); 
}

來源

2013-04-30 Simcha

你可以分享完整的代碼在小提琴或plunker – 2013-04-30 17:17:56

有js的4大文件，所以我認爲，不能把所有的小提琴，還有幾個ajaxRequests本地主機，如果你需要的東西特別，我可以給你它 – Simcha 2013-04-30 18:35:10

你已經採取了看看納克級的？

http://docs.angularjs.org/api/ng.directive:ngClass

更冗長：我想你會好起來的加載所有的CSS，然後進行動態選擇哪個應用在運行時。改變你正在加載的文件對我來說就像是錯誤的方法。

一個選項：使用ng-class來動態更改BODY標籤的類別，並使您的規則與發生爲具有LEFT或RIGHT集合的父級子元素的元素相匹配。

來源

2013-04-30 20:42:24

Angular的動態CSS

回答

相關問題