瞭解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(); 
     }); 
    }; 
});