Question

我在将jQuery转换为指令中的纯angularjs时遇到了一些麻烦..据我所知，它应该可以工作但是我之前只做过一个指令。

有人可以解释我做错了什么吗？指令没有任何反应。

这是jQuery：

$(".page-header-fixed .navbar.scroll-hide").mouseover(function () {
    $(".page-header-fixed .navbar.scroll-hide").removeClass("closed");

    return setTimeout((function () {
        return $(".page-header-fixed .navbar.scroll-hide").css({
            overflow: "visible"
        });
    }), 150);
});

$(function () {
    var delta, lastScrollTop;
    lastScrollTop = 0;
    delta = 50;

    return $(window).scroll(function(event) {
        var st;

        st = $(this).scrollTop();

        if (Math.abs(lastScrollTop - st) <= delta) {
            return;
        }

        if (st > lastScrollTop) {
            $('.page-header-fixed .navbar.scroll-hide').addClass("closed");
        } else {
            $('.page-header-fixed .navbar.scroll-hide').removeClass("closed");
        }

        return lastScrollTop = st;
    });
});

这是我的指示：

(function() {

    'use strict';

    angular
        .module('app.directives')
        .directive('navScroll', navScroll);

    function navScroll() {
        return function (element) {
            var windowEl = angular.element($window);
            var delta = 50;
            var lastScrollTip = 0;

            element.bind('mouseover', function () {
                element.removeClass('closed');

                return $timeout((function () {
                    return element.css({
                        overflow: 'visible'
                    });
                }), 150);
            });

            windowEl.on('scroll', function () {
                var st = windowEl.scrollTop();

                if (Math.abs(lastScrollTop - st) <= delta) {
                    return;
                }

                if (st > lastScrollTop)
                    element.addClass('closed');
                else
                    element.removeClass('closed');

                return lastScrollTop = st;
            });
        };
    }

})();

Answer 1

除了navScroll函数必须返回一个对象之外，还有一些语法错误和拼写错误的变量。您也没有注入$window和$timeout依赖项。我在下面重写了你的例子：

(function() {
    'use strict';

    angular.module('app.directives').directive('navScroll', ['$window', '$timeout', function($window, $timeout){
        return {
          restrict: 'A',
          link: function (scope, element) {
              var windowEl = angular.element($window);
              var delta = 50;
              var lastScrollTop = 0;

              element.bind('mouseover', function () {
                  element.removeClass('closed');

                  $timeout(function () {
                      element.css({
                          overflow: 'visible'
                      });
                  }, 150);
              });

              windowEl.on('scroll', function () {
                  var st = windowEl.scrollTop();

                  if (Math.abs(lastScrollTop - st) <= delta) {
                      return;
                  }

                  if (st > lastScrollTop)
                      element.addClass('closed');
                  else
                      element.removeClass('closed');

                  lastScrollTop = st;
              });
          }
        };
    }]);
})();

之后，您可以通过向其添加nav-scroll属性将其应用于元素：

<div nav-scroll></div>

AngularJS指令：将jQuery nav-scroll转换为指令

1 个答案: