Geek Answers Handbook

Angular.element ($ window) .scrollTop () throws "not function" with webpack

I am using Angularjs to develop my interface. I recently started implementing Webpack, then I realized that angular.element ($ window) .scrollTop () stops working and starts throwing an error, because "windowElement.width is not a function". Below are the old code and the new code with webpack.

Old working code:

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

        };
    }]);

New code with webpack causes an error:

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 is a stacktrace for the exception that I get.

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)

I bind this directive in my app app.js position as shown below

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

I tried everything that I could, but could not fix it. Please, help.

+4
source share
2 answers

scrollTop jquery, jquery angular. $.fn, angular.element. $.fn.scrollTop.call($window). $($window).scrollTop() jquery angular, .

: $(element), jq (lite/query), add/removeClass.

+7

Angular JQuery.

, "scrollTop is undefined".

, scrollTop .

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

0

More articles:


All Articles