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

回答

相关问题