How do you rotate image in angularjs
17,678
Solution 1
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.
Solution 2
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 .
Author by
user1424508
Updated on June 04, 2022Comments
-
user1424508 about 2 years
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 jquery rotate library but it doesn't work. Help?
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
<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; };