How to set value for dir-Attribute via AngularJS

Question

I want to set the direction of the body-element depending on some logic inside the controller.

So if a language file has a certain value, i want to change from "ltr" to "rtl".

I know there is a way of setting HTML attributes via ng-attr-, but it's not working for dir.

I made a JSFiddle to show my problem. The question is:

How can I set the dir-attribute via the controller?

<div ng-controller="MyCtrl">
    <div ng-attr-dir="{{direct}}">   
        <p>Test</p>
    </div>
</div>

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.direct = "rtl";
}

Answer 1

Just use dir, instead of ng-attr-dir.

<div dir="{{direct}}"> 

Fiddle

Answer 2

It can be accomplished with a trivial directive:

myApp.directive("myDir", function() {
    return {
        link: function(scope, elem, attrs) {
            attrs.$observe("myDir", function(newval) {
                if( newval ) {
                    elem.attr("dir", newval);
                }
                else {
                    elem.removeAttr("dir");
                }
            });
        }
    };
});

Use it as:

<div my-dir="{{direct}}">

A forked fiddle: http://jsfiddle.net/34ch4qef/1/

Answer 3

Use inline style="direction:{{direct}}" instead .

http://jsfiddle.net/HB7LU/7373/

Answer 4

You have to use an Angular version the actually supports ngAttr ;) 1.0 doesn't.