AngularJS指令：將jQuery導航滾動到指令

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依賴項。通過將nav-scroll屬性，它

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

之後，你可以把它應用到一個元素：我已經重寫下面的例子

<div nav-scroll></div>