AngularJS自定义指令编译转换

Question

我正在尝试编写一个指令，将其子元素包装在a中，然后添加/删除样式，具体取决于其内容是否溢出。问题是，我尝试的不同方法打破了我写的另一个自定义指令的子元素。

这样做的目的是设置丑陋的-webkit-scrollbar，它可以在不改变原生滚动行为的情况下改变我的布局。

这是子元素的自定义指令：

function fgDrawers($swipe, $timeout) {
    var directive = {
        controller: 'InboxController',
        // controllerAs: 'vm',
        // bindToController: true,
        // restrict: 'A',
        link: linkFunc
    };

    return directive;

    function linkFunc(scope, $wrapper, attr) {
        $wrapper.addClass('fg-drawers');
        // elements
        var $content = $wrapper.children('[fg-content]');
        var $drawerLeft = $wrapper.children('[fg-drawer=left]');
        var $drawerRight = $wrapper.children('[fg-drawer=right]');
        var $divider = $wrapper.children('[fg-divider]');

        // positions
        var restX = 0;
        var dragStartX;
        var deltaX;
        var relativeX;
        var snapLeftX = $content[0].offsetWidth;
        var thresholdLeft = snapLeftX / 3;
        var snapRightX = -73;
        var thresholdRight = snapRightX / 2;

        // states

        $swipe.bind($content, {
            start: function (pos, e) {
                dragStartX = pos.x;
            },
            move: function (pos, e) {
                deltaX = pos.x - dragStartX + restX;

                if (deltaX >= 0) {
                    $drawerLeft.css({
                        'zIndex': 2
                    });
                } else {
                    $drawerLeft.css({
                        'zIndex': 0
                    });
                }

                $content.css({
                    '-webkit-transform': 'translateX(' + deltaX + 'px)',
                    'transform': 'translateX(' + deltaX + 'px)'
                });
            },
            end: function (pos, e) {
                animateSnap();
                if (deltaX > 0 && deltaX > thresholdLeft) {
                    $content.css({
                        '-webkit-transform': 'translateX(' + snapLeftX + 'px)',
                        'transform': 'translateX(' + snapLeftX + 'px)'
                    });
                    restX = snapLeftX;
                    scope.vm.deliverTicket(scope.ticket).done(function (res) {
                        console.log('', res);
                    });
                } else if (deltaX < 0 && deltaX < thresholdRight) {
                    $content.css({
                        '-webkit-transform': 'translateX(' + snapRightX + 'px)',
                        'transform': 'translateX(' + snapRightX + 'px)'
                    });
                    restX = snapRightX;
                } else {
                    $content.css({
                        '-webkit-transform': 'translateX(0)',
                        'transform': 'translateX(0)'
                    });
                    restX = 0;
                }
            },
            cancel: function (e) {
                animateSnap();
                $content.css({
                    '-webkit-transform': 'translateX(0)',
                    'transform': 'translateX(0)'
                });
                restX = 0;
            }
        });

        function animateSnap() {
            $content.addClass('snap-transition');
            $timeout(function () {
                $content.removeClass('snap-transition');
            }, 250);
        }
    }