I've been working on a directive called bouncy-arrow that allows for positioning and rotation right in the markup.
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');
}
};
});
In my template, I use it like this:
<bouncy-arrow heading="15"></bouncy-arrow>
The arrow displays with a red background color as expected. However, the transform doesn't seem to be applied to the ionicon. How can I make sure the transform works?
UPDATE: I found a solution...
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');
}
};
});