Question

我正在使用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"));

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

Answer 1

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

附注：您不必执行$(element)，元素已经包含jq（lite / query），其中已有add/removeClass函数可用。

Answer 2

Angular在JQuery之前加载。

还值得一提的是为什么你会得到那个错误，而不是“scrollTop未定义”。

这是因为scrollTop也是Element的属性。

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

angular.element（$ window）.scrollTop（）使用webpack抛出“不是函数”

2 个答案: