Compass rotation with Ionic


#1

Hi everyone, I try to make an ios app that rotate an image with the device’s compass.
For access to the device’s compass i used ng-cordova plugin and this plugin put the degrees from north in $scope.deg.
i made a directive to rotate the image inside a div:

directive('rotate', function() {
return {
    link: function(scope, element, attrs) {
        // 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.css({
                '-moz-transform': 'rotate(' + rotateDegrees + 'deg)',
                '-webkit-transform': 'rotate(' + rotateDegrees + 'deg)',
                '-o-transform': 'rotate(' + rotateDegrees + 'deg)',
                '-ms-transform': 'rotate(' + rotateDegrees + 'deg)'
            });
        });
    }
}

});
but when i put in the div this directive:

<div rotate degrees="{{deg}}"><img ...></div>

It doesn’t work on iphone.
Does anyone have an idea!?Thanks


#2

I think the problem may be that you are passing the value and not the deg variable.

Should be degrees=“deg”.


#3

You are the best!! thank a lot, i’ll go crazy without you!


#4

This is great! Except I can’t get it to work with ionicons

Any ideas?