将 jQuery 实现为 Angular 指令

Question

我有一些 jQuery，我为这里的一个花哨的小状态而写的。我想采用我编写的代码，并将其实现到我正在制作的新 AngularJS 站点中。我只是不确定从哪里开始。

我认为最好的办法是制作一个指令，但它需要在点击时触发。

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());

您可以在此处查看此操作：http://codepen.io/Pink401k/pen/sxljF?editors=001

感谢您的帮助！

Answer 1

有许多不同的方法可以实现您想要的。如今，我可能会选择不同的路线（例如，使用指令控制器和孩子们的require-ing），但我尝试将其实现为“新人友好”。

---

逻辑

• 我选择将指令附加到父容器，即<ul>。
• 容器负责根据预定义的选择器/类查找小兔子（我称之为标记）和“位置”（即<a> 元素）。
• 容器还负责将侦听器附加到“位置”，在“破坏”的情况下移除侦听器（例如移除元素）并初始化标记的位置。

---

代码

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

---

另请参阅此short demo。