理解angularjs指令和数据绑定

我仍然在围绕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>

app.directive（'trackPosition'，[function（）{
返回{
限制：“A”，
范围：{
目标：“=目标”
},
链接：功能（范围、要素、属性）{
var navtop=elem[0]。偏移；
window.onscroll=函数（）{
var elemTop=elem[0]。offsetTop；
targetTop=document.getElementById（scope.target）.getBoundingClientRect（）.top；
console.log（scope.title+”、“+elemTop+”、“+targetTop”）；
（targetTop您正在使用

 window.onscroll = function() {

这是一个全局事件处理程序。它将被后续的指令调用覆盖-当您这样做时，您将只有一个处理程序。如果您包括jQuery（即使没有，我也不知道jqLite是否处理此问题），您可以将其更改为

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

它将自动处理具有两个事件处理程序的事件。
多亏了dave，这项功能现在可以正常工作了：

/* 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();
        });
    };
});

/*轨道位置*/
应用指令（“轨迹位置”，功能（$window）{
返回函数（范围、元素、属性）{
元素（$window）.bind（“滚动”，函数（）{
var elemTop=elem[0]。offsetTop；
targetTop=document.getElementById（scope.target）.getBoundingClientRect（）.top；
（塔吉托普）