Question

我正在尝试为我的申请添加rtl-ltr支持这是一个问题：假设有这样的输入：

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

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

在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");
                });
            });
        }
    };
});

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

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

Answer 2

还有一种方法。而不是更改页面上的多个类（虽然并不困难），在应用程序容器的顶层只更改一个类并从那里使用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类body标记：

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

在任何控制器中：

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

在rtl和ltr中自动更改类

2 个答案: