Hey there, I've got an image that I need help rotating. There are two buttons - left and right - that should rotate the image 45 degrees in opposite directions. I attempted to create a directive using the jquery rotate library, but it's not working. Any suggestions?
directive.js
.directive('rotate', function() {
return {
restrict:'A',
link: function(scope, element, attrs) {
console.log('hello');
// monitor the degrees attribute and update the UI accordingly
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;
};