How do you rotate image in angularjs

Question

Hi I have an image that I want to rotate. There are two buttons left and right which rotate the image 45 degrees in opposite directions. I tried creating a directive using

Answer 1

I just wanted to tell you my solution about rotating.

<img src="{{Image_URL}}" id="img{{$index}}" class="CssImage" />
<a href=""><span class="glyphicon glyphicon-repeat" id="rotateIcon" data-ng-init="rd=1;" data-ng-click="RotateImage('img'+ $index,rd);rd=rd+1;rd==4?rd=0:''"></span></a>

Here rd states for rotate degree time(x1,x2,x3,x4 -x4 =360 then resetting it to 0 ) Say that you have an ng-repeat for images in there created img ids.and in this span's ng-click I rotate the image by applying css .

$scope.RotateImage = function (id,deg) {
    var deg = 90 * deg;
    $('#' + id).css({
        '-webkit-transform': 'rotate(' + deg + 'deg)',  //Safari 3.1+, Chrome  
        '-moz-transform': 'rotate(' + deg + 'deg)',     //Firefox 3.5-15  
        '-ms-transform': 'rotate(' + deg + 'deg)',      //IE9+  
        '-o-transform': 'rotate(' + deg + 'deg)',       //Opera 10.5-12.00  
        'transform': 'rotate(' + deg + 'deg)'          //Firefox 16+, Opera 12.50+  

    });
}

Just take as an Alternative , any comments will be appreciated .

Answer 2

$scope.RotateImageRight = function () {
            z = z + 1;
            var img;
            if (z === 1) {
                img = document.getElementById("rotate90");
                img.style.transform = "rotate(-90deg)";
                img.style.width = "725px";

            }

            else if (z === 2) {
                img = document.getElementById("rotate90");
                img.style.transform = "rotate(-180deg)";
                img.style.width = "870px";
            }

            else if (z === 3) {
                img = document.getElementById("rotate90");
                img.style.transform = "rotate(-270deg)";
                img.style.width = "725px";
            }

            else if (z === 4) {
                img = document.getElementById("rotate90");
                img.style.transform = "rotate(-360deg)";
                img.style.width = "870px";
            } else {
                z = 0;
            }

        }

Answer 3

You can do the rotation by setting the CSS in the directive

app.directive('rotate', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.$watch(attrs.degrees, function (rotateDegrees) {
                console.log(rotateDegrees);
                var r = 'rotate(' + rotateDegrees + 'deg)';
                element.css({
                    '-moz-transform': r,
                    '-webkit-transform': r,
                    '-o-transform': r,
                    '-ms-transform': r
                });
            });
        }
    }
});

Hope it can shed some light on.

Demo