Change automaticlly class in rtl and ltr
I am trying to add support rtl-ltr
for my application.
here is the question: suppose there is an input like this:
<span class="sp-right">
<label>
Number:
</label>
</span>
Is it possible to programmatically change the whole class sp-right
to sp-left
?
is it a good idea to support ltr and rtl in angular?
thank
With jQuery
$(".sp-right").each(function(){
$(this).removeClass("sp-right").addClass("sp-left");
});
The above code will run once only in the code sequence. Put it in an event listener function like:
$("button.trigger").click(function(){
$(".sp-right").each(function(){
$(this).removeClass("sp-right").addClass("sp-left");
});
});
Then it will run when the event is triggered.
Or you can create a directive. I am writing for you
_module.directive("spRight", function () {
return {
restrict: 'C',
link: function (scope, element, attrs) {
element.removeClass("sp-right").addClass("sp-left");
}
};
});
UPDATE:
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");
});
});
}
};
});
Then add the class to the button:
<button class="button-that-trigger"></button>
source to share
Another approach. Rather than changing multiple classes on the page (although it's not that hard), it makes much more sense to change only one class at the top level of the application container and manage all the classes with CSS from there.
For example:
<span class="sp-direction">
<label>Number:</label>
</span>
In CSS
.sp-direction {
direction: ltr; /* default text direction */
}
.sp-right .sp-direction {
direction: rtl;
}
.sp-left .sp-direction {
direction: ltr;
}
Now all you have to do is change sp-right
/ sp-left
classes to tag body
:
<body class="sp-{{spClass}}">
And in any controller:
$rootScope.spClass = 'left';
$rootScope.spClass = 'right';
source to share