0

我在获取传递给指令以在 DOM 更新时更新的数据时遇到问题。该指令突出显示 sidenav 上的活动选项卡，与它们在页面上滚动到的位置相关。这是我所做的一个小提琴示例。

在我的本地站点上，有很多部分有条件地显示或隐藏，用户可以并且可能经常更改此设置。所以这会改变我存储在 中的元素 ID 的位置resultsSections。当位置发生变化时，它们不会在指令中更新。

<script type="text/javascript">
$scope.getResultsSectionPosition = function () {
    var resultsSections = {};
    $('.results-heading').each(function () {
        resultsSections[this.parentNode.id] = $(this).offset().top;
    });
    console.log(resultsSections);
    return $scope.resultsSections = resultsSections;
}
$scope.getResultsSectionPosition();
</script>

我通过调用重新初始化了本地站点$scope.getResultsSectionPosition()- 新的偏移量存储在 中resultsSections，但指令仍然保持初始值。如何强制指令使用最活跃的数据？

myApp.directive('navActive', function () {
return function(scope, element, attrs) {

        var height = $(window).height(),
            section = 0;
        $(window).bind("scroll", function() {
            var position = $(this).scrollTop();
            for (section in scope.resultsSections) {
                if (position + height - 50 >= scope.resultsSections[section]) {
                    $('li').removeClass('results-nav-active');
                    $('#nav_' + section).addClass('results-nav-active');
                };
            };
        });
    };  
})

我试过使用scope.$watch('resultsSections", function(){...})但没有成功。

4

1 回答 1

2

您应该能够使用 $watch，但您也可以使用隔离范围属性，然后将您的控制 $scope 变量直接传递给您的指令

我稍微调整了您的代码并添加了一些 console.log 以查看会发生什么，您可以在此处查看http://jsfiddle.net/DotDotDot/uC2dP/14/

我在顶部添加了一个按钮，以强制修改位置，以便查看指令中的影响，并在指令中添加了一个 console.log() ，其中调用了滚动位置。此外，您的指令现在有一个独立的范围，resultsSections 绑定到 HTML 中给出的参数

return {
    scope:{resultsSections:"=sections"},
    link:function(scope, element, attrs) {


    var height = $(window).height(),
        section = 0;
    $(window).bind("scroll", function() {
        var position = $(this).scrollTop();
        console.log(scope.resultsSections)
        for (section in scope.resultsSections) {
            if (position + height - 50 >= scope.resultsSections[section]) {
                $('li').removeClass('results-nav-active');
                $('#nav_' + section).addClass('results-nav-active');
            };
        };
    });
}
}

在 HTML 中：

<section nav-active sections="resultsSections">

您可以看到，如果您单击按钮然后滚动，则指令中的位置已正确更新

玩得开心

于 2013-07-30T15:36:51.663 回答