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），但我试图将其作为“新人友好”来实现。

逻辑

我选择将指令附加到父容器，即<ul>。
容器负责根据预定义的选择器/类找到小rabit thingy（我称之为 marker ）和“position”（即<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 。

将jQuery实现为Angular Directive

1 个答案:

逻辑

代码