Question

我遇到一个问题，即在DOM更新时将我传递给我的指令的数据更新。该指令突出显示sidenav上的活动选项卡与页面上滚动到的位置的关系。这是我所做的fiddle example。

在我的本地网站上，有大型部分有条件地显示或隐藏，用户可以＆amp;可能经常改变这种情况。所以这会改变我存储在resultsSections中的元素ID的位置。当职位发生变化时，他们不会在指令中得到更新。

<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(){...})但是没有成功。

Answer 1

你应该能够使用$ watch，但你也可以使用isolate scope属性，然后将你的controlle $ scope变量直接传递给你的指令

我调整了一些你的代码，我添加了一些console.log以查看会发生什么，你可以在这里看到它http://jsfiddle.net/DotDotDot/uC2dP/14/

我在顶部添加了一个按钮，强制修改位置，以便查看指令中的反响，并在指令中添加了一个console.log（），其中的位置调用了scroll。您的指令现在也有一个独立的范围，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">

你可以看到，如果你点击按钮然后滚动，指令中的位置就会正确更新

玩得开心

更新角度指令中的数据

1 个答案: