Question

我正在尝试构建一个可以在标记中定位和旋转的bouncy-arrow指令。

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？

更新：这是修复...

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');
        }
    };

});

Answer 1

您需要将变换应用于＆＃34; ion-arrow-right-c＆＃34;

的伪前类：

我的建议是为元素创建自定义类，然后使用css进行转换。那种方式更清洁。

我怎样才能改变Ionicon的CSS？

1 个答案: