Question

您好我正在开发具有英语和阿拉伯语言的angularjs SPA应用程序中的Web应用程序。对于RTL和LTR属性，我尝试将类添加到app.js中的body html元素，如下所示。

 $scope.changeLanguage = function (lang) {
        $scope.lang = lang == 'de_AR' ? 'de_AR' : 'de_EN';
        var myEl = angular.element(document.querySelector('#body'));
        myEl.addClass('rtl');
}

使用上面的代码我无法添加类。我可以在html（浏览器）中看到下面的代码。

<body ng-controller="RoslpAppController" class="ng-scope">

我可以知道使用Angularjs添加css类的正确方法是什么？

Answer 1

您正在寻找 ngClass 指令。如果您有一个范围变量$ scope.rtl来驱动显示内容的哪一部分，则可以使用ng-class添加动态类：

 <body ng-controller="MainCtrl" ng-class="{'rtl'}">

DEMO

Answer 2

以下是针对ng class的三元检查

<div ng-class="(lang === 'de_AR') ? 'rtl' : 'ltr'"></div>

这是针对一个条件的ng类中的多个案例

<div ng-class="{'de_AR':'rtl', 'de_EN':'ltr'}[lang]"></div>

控制器内的代码

$scope.changeLanguage = function (lang) {
        $scope.lang = lang == 'de_AR' ? 'de_AR' : 'de_EN';
        var myEl = angular.element(document.querySelector('#body'));
        myEl.addClass('rtl');
}

Answer 3

你可以使用ng-class

<body ng-controller="RoslpAppController" ng-class="{'class1':lang == 'de_AR', 'class2': lang == 'de_EN'} ng-scope">

Answer 4

您的代码不起作用，因为

angular.element(document.querySelector('#body'));

查找 ID 为“body”的元素如果您想访问正文，请使用：

angular.element(document.querySelector('body'));

Angularjs在html中将类添加到body

4 个答案: