2
Ich versuche, eine bouncy-arrow Direktive zu erstellen, die in Markup positioniert und gedreht werden kann.Wie kann ich ein Ionicon CSS transformieren?
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');
}
};
});
Dies scheint in meiner Vorlage:
<bouncy-arrow heading="15"></bouncy-arrow>
Der Pfeil mit rotem Hintergrund Farbe richtig angezeigt wird. Aber die Transformation hat keine Wirkung. Wie kann ich die Transformation auf die ionicon anwenden?
UPDATE: Hier ist das 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');
}
};
});