2

Hi I have 3 languages on site, one of them has right-to-left letters, so when I change language I need dynamicly update css. Don't know how to do it. The problem is: I have ng-view, that has languages, where I change languages, and I have HeadController for whole document and when I change language inside ng-view, my Head controller don't see this changes. Here my index:

    <!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>

and 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 - contains shared values

and here Language controller:

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

1 回答 1

6

你看过ng-class吗?

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

更详细地说:我认为你会更好地加载所有 css,然后动态选择你在运行时应用的内容。更改您正在加载的文件对我来说感觉是错误的方法。

一种选择:使用 ng-class 动态更改 BODY 标签的类,并让您的规则与作为具有 LEFT 或 RIGHT 集的父级的子级出现的元素相匹配。

于 2013-04-30T20:42:24.597 回答