angularjs – angular.element($window).scrollTop()使用webpack
发布时间:2020-12-17 17:21:00 所属栏目:安全 来源:网络整理
导读:我正在使用 Angularjs进行前端开发.最近我开始实现Webpack然后我意识到angular.element($window).scrollTop()停止工作并开始抛出错误,因为“windowElement.width不是函数”.以下是旧代码和webpack的新代码. 旧工作代码: app.directive("ajnav",['$window','
我正在使用
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',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',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")); 我尝试了所有可能的选项,但无法修复它.请帮忙. 解决方法
scrollTop函数是由jquery添加的,你必须在angular之后加载jquery.在这种情况下,您不会将$.fn函数添加到angular.element实例中.在这种情况下你也可以做$.fn.scrollTop.call($window).或$($window).scrollTop()或在角度之前加载jquery,以便您当前的代码按原样运行.
侧注:你不必做$(元素),元素已经是jq(lite / query)包装,它已经有了add / removeClass函数. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |