你如何在angularjs中旋转图像答案

【问题标题】：How do you rotate image in angularjs你如何在angularjs中旋转图像
【发布时间】：2013-09-21 07:48:18
【问题描述】：

您好，我有一张想要旋转的图片。左右两个按钮可将图像向相反方向旋转 45 度。我尝试使用 jquery 旋转库创建指令，但它不起作用。帮忙？

directive.js

.directive('rotate', function() {
return {
    restrict:'A',
    link: function(scope, element, attrs) {
      console.log('hi');
        // watch the degrees attribute, and update the UI when it changes
        scope.$watch(attrs.degrees, function(rotateDegrees) {
            console.log(rotateDegrees);
            //transform the css to rotate based on the new rotateDegrees
  element.rotate(rotateDegrees);    

        });
    }
}

});

模板.html

<p><img degrees='angle' rotate id='image' src='myimage.jpg'/> </p>
<a ng-click="rotate('-45')">Rotate Left</a>
<a ng-click="rotate('45')">Rotate Right</a>

controller.js

   $scope.rotate= function(angle) {

   $scope.angle=angle;
    };

【问题讨论】：

还有另一种方法。您可以使用 ng 样式：stackoverflow.com/questions/22091733/…

标签： javascript jquery angularjs rotation angularjs-directive

【解决方案1】：

您可以通过在指令中设置 CSS 来进行旋转

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

希望能有所启发。

Demo

【讨论】：

是的，但是有什么方法可以让图片 URL 旋转？

【解决方案2】：

我只是想告诉你我关于旋转的解决方案。

<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>

这里有旋转度数时间的状态（x1,x2,x3,x4 -x4 =360 然后将其重置为 0 ）假设您在其中创建了 img ids 的图像的 ng-repeat。在此跨度的 ng-click 中，我通过应用 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+  

    });
}

只需作为替代品，任何 cmet 都会受到赞赏。

【讨论】：

【解决方案3】：

$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;
            }

        }

【讨论】：

只需调用按钮上的函数(ng-click=" RotateImageRight ()")