angulaire.élément de dollars (fenêtre).scrollTop() est à jeter “n'est pas une fonction” avec webpack
Je suis en utilisant Angularjs pour mon frontend développement. Récemment, j'ai commencé à mettre en œuvre Webpack puis j'ai réalisé que angulaires.élément de dollars (fenêtre).scrollTop() a cessé de fonctionner et a commencé à jeter le message d'erreur "windowElement.la largeur n'est pas une fonction". Suivantes sont code ancien et le nouveau code avec webpack.
Ancien code du travail:
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));
}
};
}]);
Nouveau code avec webpack est en train de jeter erreur:
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));
}
};
}];
Suivante est stacktrace de l'exception que j'obtiens.
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)
Je suis de la liaison de cette directive dans mon entrée poing App.js comme ci-dessous
app.directive("ajnav", require("./directives/common/AJNav"));
J'ai essayé toutes les option je le pouvais, mais pas en mesure de le réparer. S'il vous plaît aider.
OriginalL'auteur joy | 2015-06-04
Vous devez vous connecter pour publier un commentaire.
scrollTop
fonction est ajoutée par jquery, vous devez être le chargement de jquery après angulaire. Dans ce cas, on ne pourra pas se$.fn
fonctions ajoutées à laangular.element
instance. Vous pourriez aussi bien le faire$.fn.scrollTop.call($window)
dans ce cas. ou$($window).scrollTop()
ou de charger jquery avant angulaire de sorte que votre code fonctionne comme est.Côté Remarque: Vous n'avez pas à faire
$(element)
, l'élément est déjà jq(lite/requête) enveloppé qui aadd/removeClass
fonction d'ores et déjà disponibles.ce qui se passe lorsque vous ne
$($window).scrollTop()
, avez-vous$
à tous (journal de la console$
aprèsvar $ = require("jquery");
)?Quand j'ai changé le code pour utiliser $($de la fenêtre).scrollTop() puis il a travaillé. Mais il serait mieux je n'ai pas à changer mon code 🙂
pour cela vous avez besoin de charger jquery script avant de le charger angulaire de lui-même. Aussi, vous n'avez pas besoin de faire
$(element).addClass
au lieuelement.addClass
devrait fonctionnerAussi voir pour fixer votre ordre de chargement. Vous êtes manuel bootstrap droit?
OriginalL'auteur PSL
Angulaire est le chargement avant de JQuery.
Il est également intéressant de mentionner pourquoi vous obtenez cette erreur au lieu de "scrollTop est pas défini".
C'est parce que scrollTop est aussi une propriété de l'Élément.
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop
OriginalL'auteur Mark Lu