你如何在angularjs中旋转图像 [英] How do you rotate image in angularjs

问题描述

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

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?

指令.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

controller.js

   $scope.rotate= function(angle) {

   $scope.angle=angle;
    };

推荐答案

可以通过在指令中设置 CSS 来实现旋转

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

希望它能有所启发.

演示

这篇关于你如何在angularjs中旋转图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！