我正在尝试创建一个简单的指令，用于在滚动元素附近时设置或删除类。我在 $window 上使用 scroll 事件的回调，但问题是它仅适用于最后一个指令。
HTML
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="style.css">
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="box hidden" on-scroll-class="{add: 'large', remove: 'hidden'}"></div>
<div class="box hidden" on-scroll-class="{add: 'large', remove: 'hidden'}"></div>
<div class="box hidden" on-scroll-class="{add: 'large', remove: 'hidden'}"></div>
</body>
</html>
JS
var app = angular.module("myApp", []);
app.directive("onScrollClass", ["$window", function ($window) {
return {
restrict: "A",
scope: {
onScrollClass: "@",
onScrollClassReverse: "@",
onScrollOffset: "@"
},
link: function(scope, element, attrs) {
var reverse = angular.isDefined(scope.onScrollClassReverse) ?
scope.onScrollClassReverse : false;
var offset = angular.isDefined(scope.onScrollOffset) ?
scope.onScrollOffset : 150;
var classToAddObj = scope.$eval(scope.onScrollClass);
var classToAdd;
var classToRemove = null;
if (angular.isObject(classToAddObj)) {
classToAdd = classToAddObj.add;
classToRemove = classToAddObj.remove;
} else {
classToAdd = classToAddObj;
}
$element = $(element);
$($window).on("scroll", function() {
console.log($element);
console.log($element.offset().top);
if (this.pageYOffset >= $element.offset().top - offset) {
$element.addClass(classToAdd);
$element.removeClass(classToRemove);
} else if (reverse) {
$element.addClass(classToRemove);
$element.removeClass(classToAdd);
}
});
}
}
}]);
CSS
body {
height: 2000px;
}
.hidden {
opacity: .3;
}
.large {
transform: scale(1.2);
}
.box {
background-color: tomato;
width: 200px;
height: 200px;
margin: 50px auto;
transition: all .5s ease;
}
最佳答案
它与 Angular 无关。
您正在设置变量 $element而不声明它是一个变量。
由于Javascript原型(prototype)继承，它会尝试在原型(prototype)链中找到该变量。
如果找不到它，它会将其视为全局变量。
这就是为什么只有最后一个指令对您有用，它覆盖了 $element每次都有变量。
只需添加 var之前$element ，并记住始终使用 var 声明变量关键字(或 let (ES 2015) 更好)。
关于javascript - $window .on ("scroll") 仅在调用它的最后一个指令中工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34832727/