在 rtl 和 ltr 中自动更改 class

Question

我正在尝试为我的应用程序添加 rtl-ltr 支持。
这是问题：假设有这样的输入：

<span class="sp-right">
    <label>
        Number:
    </label>
</span>

是否可以通过编程将所有 sp-right class 更改为 sp-left？

在 angular 中支持 ltr 和 rtl 是个好主意吗？

谢谢

Answer 1

与jQuery

$(".sp-right").each(function(){
    $(this).removeClass("sp-right").addClass("sp-left");
});

以上代码在代码序列中只会运行一次。把它放在事件监听函数中，如：

$("button.trigger").click(function(){
    $(".sp-right").each(function(){
        $(this).removeClass("sp-right").addClass("sp-left");
    });
});

然后在事件触发时运行。

或者您可以构建一个指令。我在为你写信

_module.directive("spRight", function () {
    return {
        restrict: 'C',
        link: function (scope, element, attrs) {
            element.removeClass("sp-right").addClass("sp-left");
        }
    };
});

更新：

app.directive("buttonThatTrigger", function () {
    return {
        restrict: 'C',//target all elements with class button-that-trigger
        link: function (scope, element, attrs) {
            element.click(function(){
                $(".sp-right").each(function(){
                    $(this).removeClass("sp-right").addClass("sp-left");
                });
            });
        }
    };
});

然后在按钮中添加一个class：

<button class="button-that-trigger"></button>

Answer 2

另一种方法。与其在页面上更改多个 classes（虽然并不难），更合理的做法是在应用程序容器的顶层仅更改一个 class 并从那里管理所有 classes 与 CSS。

例如：

<span class="sp-direction">
    <label>Number:</label>
</span>

在CSS

.sp-direction {
    direction: ltr; /* default text direction */
}
.sp-right .sp-direction {
    direction: rtl;
}
.sp-left .sp-direction {
    direction: ltr;
}

现在您需要做的就是更改 sp-right/sp-left classes on say body 标签：

<body class="sp-{{spClass}}">

并且在任何控制器中：

$rootScope.spClass = 'left';
$rootScope.spClass = 'right';

在 rtl 和 ltr 中自动更改 class

Change class automaticlly in rtl and ltr

angularjs