Javascript 旋转页面上的图标

我想用箭头来显示方向，我想用标准的离子箭头来显示方向。 我可以将向上箭头旋转到任何方向吗

ion-arrow-up-a

下面是下面评论中的一个尝试

<i class="icon ion-arrow-up-a" rotate degrees="90"></i>


angular.module('app.customDirectives', []).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)'
                    });
                });
            }
    }
});

角度.module（'app.customDirectives'，[]）。指令（'rotate'，function（）{
返回{
链接：函数（范围、元素、属性）{
//观察度属性，并在其更改时更新UI
范围$watch（属性度、功能（旋转度）{
//console.log（旋转格律）；
//将css转换为基于新的rotatedgrees进行旋转
element.css({
“-moz变换”：“旋转（“+rotateDegrees+deg）”，
“-webkit变换”：“旋转（“+rotateDegrees+deg）”，
“-o变换”：“旋转（“+rotateDegrees+deg）”，
“-ms变换”：“旋转（”+rotateDegrees+deg）”
});
});
}
}
});

箭头还有其他变体：

ion-arrow-up-a
ion-arrow-right-a
ion-arrow-down-a
ion-arrow-left-a

或者。。。正如我所知，爱奥尼亚框架是基于HTML5的，所以你可以使用CSS样式

.style {
    -moz-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg);
}

---

如果您想要动态旋转，您必须检查。

出于某种原因，

元素必须拥有

显示：内联块

css样式才能成功旋转：

控制器代码：

$scope.angle = 90

HTML:

---

与上面类似，我就是这样做的

HTML:

---

具体来说，对于Ionic图标v1、v2，“旋转”属性仅适用于设置为“内联”或“内联块”的显示属性，也可能适用于内联的其他变体

然后您可以使用CSS正常地旋转它们

transform: rotate(90deg);

---

伟大的链接！我理解指令，但它不旋转我的离子箭头。。。。我需要它像指南针一样显示度数。@ElDude显示代码，我将尝试找出错误所在。请参阅上面的代码，与您提供的链接基本相同。@ElDude您可以在您获取此代码的相同位置（上面的链接）找到问题的答案。您必须创建

$scope

var并将其传递给

度

，而不仅仅是值。谢谢，我会尝试的。但是为什么它不应该采用硬编码的值呢？你看过插件了吗？我在这里的离子领域，所以没有jquery（我想，据我所知，jQ在那里不完全受支持/兼容…）

<i class="ion-arrow-up-c rotate-90">

.rotate-90 {
  display: inline-block; 
  transform: rotate(90deg);
}

transform: rotate(90deg);