你如何在angularjs中旋转图像

嗨，我有一个想要旋转的图像。 左右两个按钮可将图像以相反方向旋转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); }); } } 

}）;

template.html

 
 
 Rotate Left Rotate Right 

controller.js

  $scope.rotate= function(angle) { $scope.angle=angle; }; 

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

希望它可以阐明一些。

演示

Answer 2

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

这里rd表示旋转度时间（x1，x2，x3，x4 -x4 = 360然后将其重置为0）假设你在那里创建了图像你有图像的ng重复。在这个跨度的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+ }); } 

只需作为替代，任何评论将不胜感激。

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