$ window .on（“ scroll”）僅在最后一個被調用的指令中工作

Question

我正在嘗試創建一個簡單的指令，該指令在元素附近滾動時會設置或刪除類。 我在$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;

}

Answer 1

它與Angular無關。

您在設置變量$element未聲明它是一個變量。 由於Javascript原型繼承，它將嘗試在原型鏈中找到該變量。 如果找不到它，它將把它當作一個全局變量。

這就是為什么只有最后一個指令對您有效的原因，它每次都覆蓋$element變量。

只需在$element之前添加var ，並記住始終使用var關鍵字聲明一個變量（或者let （ES 2015）更好）。

$ window .on（“ scroll”）僅在最后一個被調用的指令中工作

問題描述

1 個解決方案

解決方案1
1 已采納 2016-01-16 22:34:30

$ window .on（“ scroll”）僅在最后一個被調用的指令中工作

問題描述

1 個解決方案

解決方案1 1 已采納 2016-01-16 22:34:30

解決方案1
1 已采納 2016-01-16 22:34:30