Angularjs angular.element（$window）.scrollTop（）正在抛出；不是一个函数；带网页包

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

旧工作代码：

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

        };
    }]);

带有Web包的新代码引发错误：

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

        };
    }];

下面是我得到的异常的stacktrace

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)

我正在我的entry poing App.js中绑定此指令，如下所示

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

---

我尝试了所有我能做的选择，但没能解决它。请提供帮助。

scrollTop函数是由jquery添加的，您必须在完成后加载jquery。在这种情况下，您将无法将

$.fn

函数添加到

angular.element

实例中。在这种情况下，您还可以执行

$.fn.scrollTop.call（$window）

。或

$（$window）.scrollTop（）

或在angular之前加载jquery，以便当前代码按原样工作

---

旁注：您不必执行

$（元素）

，元素已经被jq（lite/query）包装，它已经有

添加/删除类

功能可用。

Angular在JQuery之前加载

还值得一提的是，为什么会出现该错误而不是“scrollTop未定义”

这是因为scrollTop也是元素的属性

---

我在调试$window时发现的。$未定义，但在我的旧代码$window中。$具有完整的jqery对象。我将顺序更改为require（'jquery'），但仍然面临相同的问题。如何修复$window对象？@joy当您执行

$（$window.scrollTop（）

）时会发生什么情况，您是否得到了

$

（控制台日志

$

在

var$=require（“jquery”）；

）？当我将代码更改为使用$（$window.scrollTop（）时，它就工作了。但最好我不必更改代码：-）@joy，因为在加载angular本身之前，您需要加载jquery脚本。另外，您不需要执行

$（element）.addClass

而只需执行

element.addClass

work@joy还可以修改您的装载顺序。您正在进行手动引导，对吗？