angular.element($window).scrollTop() 使用 webpack 抛出“不是函数”答案

【问题标题】：angular.element($window).scrollTop() is throwing "is not a function" with webpackangular.element($window).scrollTop() 使用 webpack 抛出“不是函数”
【发布时间】：2015-06-04 21:12:32
【问题描述】：

我正在使用 Angularjs 进行前端开发。最近我开始实现 Webpack，然后我意识到 angular.element($window).scrollTop() 停止工作并开始抛出错误，因为“windowElement.width 不是函数”。以下是 webpack 的旧代码和新代码。

旧的工作代码：

app.directive("ajnav", ['$window', '$location', function ($window, $location) {
        return {
            restrict: "E",
            templateUrl: "/templates/common/AJNav.html",
            replace: true,
            scope: {
                seo: '=',
                conf: '='
            },
            link: function (scope, element, attrs) {
                //Bind event change the postion of AJ Nav on scroll
                var windowElement = angular.element($window);
                var onScrollHandler = function () {                    
                    //Get current height of iNav.
                    var iNavHeight = $("#iNavNGI_Header").height();
                    if (windowElement.scrollTop() > iNavHeight) {
                        $(element).addClass('navbar-fixed-top');
                        $(element).removeClass('aj-nav-container-absolute');
                    }
                    else {
                        $(element).removeClass('navbar-fixed-top');
                        $(element).addClass('aj-nav-container-absolute');
                    }
                };
                //Bind event handler on scroll
                windowElement.on('scroll', scope.$apply.bind(scope, onScrollHandler));                
            }

        };
    }]);

使用 webpack 的新代码抛出错误：

var $ = require("jquery");
var angular = require("angular");
var Utilities = require("./../../utilities/Utilities");
var AppUtilities = require("./../../utilities/AppUtilities"); 
module.exports = ['$window', '$location', function ($window, $location) {
        return {
            restrict: "E",
            templateUrl: "/templates/common/AJNav.html",
            replace: true,
            scope: {
                seo: '=',
                conf: '='
            },
            link: function (scope, element, attrs) {
                //Bind event change the postion of AJ Nav on scroll
                var windowElement = angular.element($window);
                var onScrollHandler = function () {
                    //Get current height of iNav.
                    var iNavHeight = $("#iNavNGI_Header").height();
                    if (windowElement.scrollTop() > iNavHeight) {
                        $(element).addClass('navbar-fixed-top');
                        $(element).removeClass('aj-nav-container-absolute');
                    }
                    else {
                        $(element).removeClass('navbar-fixed-top');
                        $(element).addClass('aj-nav-container-absolute');
                    }
                };
                //Bind event handler on scroll
                windowElement.on('scroll', scope.$apply.bind(scope, onScrollHandler));                
            }

        };
    }];

Follownig 是我得到的异常的堆栈跟踪。

TypeError: windowElement.scrollTop is not a function
    at module.exports.link.onScrollHandler (site.min.js:42181)
    at Scope.$get.Scope.$eval (ite.min.js:25066)
    at Scope.$get.Scope.$apply (site.min.js:25165)
    at eventHandler (site.min.js:12594)

我在指向 App.js 的条目中绑定了这个指令，如下所示

app.directive("ajnav", require("./directives/common/AJNav"));

我尝试了所有可以但无法修复的选项。请帮忙。

【问题讨论】：

标签： angularjs angularjs-directive webpack

【解决方案1】：

scrollTop函数是jquery添加的，你必须在angular之后加载jquery。在这种情况下，您不会将 $.fn 函数添加到 angular.element 实例中。在这种情况下，您也可以使用$.fn.scrollTop.call($window)。或 $($window).scrollTop() 或在 angular 之前加载 jquery，以便您当前的代码按原样工作。

旁注：您不必这样做$(element)，元素已经被 jq(lite/query) 包装，其中 add/removeClass 函数已经可用。

【讨论】：

我在调试 $window.$ 期间发现的内容是未定义的，但是在我的旧代码中 $window.$ 具有完整的 jqery 对象。我将订单更改为 require('jquery') 但仍然面临同样的问题。如何修复 $window 对象？
@joy 当您执行$($window).scrollTop() 时会发生什么，您是否得到了$（控制台日志$ 在var $ = require("jquery"); 之后）？
当我更改代码以使用 $($window).scrollTop() 然后它工作。但最好我不必更改我的代码:-)
@joy 因为你需要在加载 Angular 本身之前加载 jquery 脚本。你也不需要做$(element).addClass 而element.addClass 应该可以工作
@joy 还有see this 来修复您的加载顺序。你在做手动引导，对吗？

【解决方案2】：

Angular 在 JQuery 之前加载。

还值得一提的是为什么您会收到该错误而不是“scrollTop is undefined”。

因为scrollTop也是Element的一个属性。

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop

【讨论】：