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（也许即使没有，我不知道jqLite是否处理这个）你可以将它改为

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

它将自动处理具有两个事件处理程序的事件。

Answer 2

感谢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();
        });
    };
});

理解angularjs指令和数据绑定

2 个答案: