Implementing jQuery into an Angular Directive

Question

I have a bit of jQuery that I wrote for a fancy little here state. I want to take the code that I wrote, and implement it into the new AngularJS site that I'm making. I'm just not really sure where to start.

I think the best thing would be to make a Directive, but it needs to be triggered on click.

The JS:

var moveHereState = function(oldPos) {
  var oldPos = oldPos;
  var newPos = $('.active').position();
  if(newPos.left < oldPos.left) {
    $('.here-state').css("-webkit-transform", "scaleX( 1)");
  } else {
    $('.here-state').css("-webkit-transform", "scaleX( -1)");
  }
  newPos = newPos.left +"px";
  $('.here-state').css('left', newPos);
};

$('a').on('click', function() {
  var oldPos = $('.active').position();
  $('.active').removeClass('active');
  $(this).addClass('active');
  moveHereState(oldPos);
});

moveHereState($('.active').position());

You can see this in action here: http://codepen.io/Pink401k/pen/sxljF?editors=001

Thanks for the help!

Community · Accepted Answer · 2020-06-20 09:12:55Z

There are many different ways to achieve what you want. Nowadays, I would probably choose a different route (e.g. using a directive controller and require-ing from the children), but I tried to implement it as "new-comer-friendly" as possible.

The logic

I chose to attach a directive to the parent container, i.e. the <ul>.
The container is responsible for finding the little rabit thingy (I call it marker) and the "positions" (i.e. <a> elements), based on predefined selectors/classes.
The container is also responsible for attaching listeners to the "positions", remove the listeners in case of "destruction" (e.g. removing the element) and initializing the marker's position.

The code

app.directive('hereStateContainer', function () {
    var activeClass    = 'active';
    var activeSelector = '.' + activeClass;
    var markerSelector = '.here-state';

    function moveMarker(container, oldPos) {
        var newPos = container.find(activeSelector).position();
        var marker = container.find(markerSelector);

        var scale = ((!oldPos || (newPos.left > oldPos.left)) ? '-' : '') + '1';
        marker.css({
            'left': newPos.left + 'px',
            '-webkit-transform': 'scaleX(' + scale + ')'
        });
    }
    
    return {
        restrict: 'A',
        link: function hereStateContainerPostLink(scope, elem) {
            function hereStateContainerOnClick() {
                var activeElem = elem.find(activeSelector);
                var oldPos;
                
                if (activeElem) {
                    oldPos = activeElem.position();
                    activeElem.removeClass(activeClass);
                }

                $(this).addClass(activeClass);
                moveMarker(elem, oldPos);
            }

            elem.find('a').on('click', hereStateContainerOnClick);
            scope.$on('$destroy', function hereStateContainerOnDestroy() {
                elem.find('a').off('click', hereStateContainerOnClick);
            });

            moveMarker(elem);
        }
    };
});

See, also, this short demo.

This worked perfectly, thank you! It was definitely a little past my experience level with Angular, so I really appreciate the help. As a note for anyone else that is interested in this, the <li>s can't be positioned relatively, or things seem to break :)

Collectives™ on Stack Overflow

Implementing jQuery into an Angular Directive

1 Answer 1

The logic

The code

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

The logic

The code

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related