了解angularjs指令和数据绑定

Question

仍然我的头绕着angularjs指令，我有点困惑，为什么这不起作用。

即，我想要一个指令，跟踪它相对于目标的位置并设置目标点击布尔值。我也想在我的页面上重复使用这个指令，每个指令跟踪一个唯一的目标。

app.directive('trackPosition', [function() { 
    return { 
     restrict: 'A', 
     scope: { 
      target: "=target" 
     }, 
     link: function(scope, elem, attrs) { 
      var navtop = elem[0].offsetTop; 
      window.onscroll = function() { 
       var elemTop = elem[0].offsetTop; 
        targetTop = document.getElementById(scope.target).getBoundingClientRect().top; 
        console.log(scope.title + ", " + elemTop + ", " + targetTop); 

       (targetTop <= elemTop && (-1 * targetTop) <= elemTop) ? scope.trackedTargetHit = true : scope.trackedTargetHit = false; 
       scope.$apply(); 
      } 
     } 
    } 
}]); 


portfolio.controller('CtrlOne', function($scope) { 
    $scope.title = 'CtrlOne'; 
    $scope.target = 'TargetOne'; 
    $scope.trackedTargetHit = false; 
}); 

portfolio.controller('CtrlTwo', function($scope) { 
    $scope.title = 'CtrlTwo'; 
    $scope.target = 'TargetTwo'; 
    $scope.trackedTargetHit = false; 
}); 

<div ng-controller="CtrlOne" > 
    <section ng-class="{'white' : trackedTargetHit}" track-position target="target"> 
    </section> 
</div> 

<div ng-controller="CtrlTwo" > 
    <section ng-class="{'white' : trackedTargetHit}" track-position target="target"> 
    </section> 
</div> 

这工作正常，只有一个指令，但使用两次它发起。我知道这与我在指令中滥用范围有关。但对如何正确使用感到困惑;任何建议不胜感激。谢谢。

Answer 1

您正在使用

window.onscroll = function() { 

这是一个全球性的事件处理程序。它被后续的指令调用覆盖 - 当你这样做时，你将只有一个处理程序。如果你是jQuery的，包括（甚至如果没有，我不知道是否jqLit​​e处理这个），你可以把它改成

$(window).on('scroll', function() { 

，它会自动采取有两个事件处理该事件的照顾。

Answer 2

感谢戴夫，这是现在的工作：

/* track position */ 
app.directive("trackPosition", function ($window) { 
    return function(scope, elem, attrs) { 
     angular.element($window).bind("scroll", function() { 
      var elemTop = elem[0].offsetTop; 
       targetTop = document.getElementById(scope.target).getBoundingClientRect().top; 

      (targetTop <= elemTop && (-1 * targetTop) <= elemTop) ? scope.trackedTargetHit = true : scope.trackedTargetHit = false; 
      scope.$apply(); 
     }); 
    }; 
});