2
我试图建立一个bouncy-arrow指令，可以在标记中定位和旋转。我如何CSS转换Ionicon？
angular.module('directives').directive("bouncyArrow", function ($compile) {
return {
replace: true,
restrict: 'E',
template: '<span class="ion-arrow-right-c"></span>',
scope: {
heading: '='
},
link: function (scope, element, attrs) {
element.css('transform', 'rotate('+attrs.heading+'deg)');
element.css('-webkit-transform', 'rotate('+attrs.heading+'deg)');
element.css('background-color', 'red');
}
};
});
这会出现在我的模板：
<bouncy-arrow heading="15"></bouncy-arrow>
红色背景色箭头显示正确。但是，转换没有效果。我如何将转换应用于ionicon？
UPDATE：这里是修复...
angular.module('directives').directive("bouncyArrow", function() {
return {
replace: true,
restrict: 'E',
template: '<span class="ion-arrow-right-c"></span>',
scope: {
heading: '=',
scale: '=',
positionx: '=',
positiony: '='
},
link: function (scope, element, attrs) {
var transforms = [
'translate(' + attrs.positionx+'px,'+attrs.positiony + 'px)',
'scale(' + attrs.scale + ')',
'rotate(-'+attrs.heading+'deg)',
];
var css = {
selector: '.bouncy-arrow:before',
rules: [
'transform: '+transforms.join(' '),
'-webkit-transform: '+transforms.join(' ')
]
};
var sheet = css.selector + ' {' + css.rules.join(';') + '}';
angular.element(document).find('head').prepend('<style type="text/css">' + sheet + '</style>');
element.addClass('bouncy-arrow');
}
};
});