Question

我尝试创建一个指令，只要元素的scrollTop发生变化，就会更新范围变量。有了这个指令，我希望能够同步两个不同元素的滚动位置。

这是我到目前为止所拥有的：

module.directive('scrollTop', [function() {
    return {
        link: function($scope, element, attrs) {
            var scrollTop = $scope.$eval(attrs.scrollTop);

            element.bind('scroll', function() {
                $scope.$apply(function() {
                    scrollTop = element.prop('scrollTop');
                    console.log("scrollTop", scrollTop);
                });
            });

            attrs.$observe('scrollTop', function(value){
                console.log('detected change', value);
                element.prop('scrollTop', value);
            });
        }
    };
}]);

这是Karma测试的一部分，我正在为此写作：

it('scrolls', function() {
        var element = angular.element('<div scroll-top="scrollTopScopeVar" style="height: 100px; overflow-y: scroll;"><div style="height: 200px;"></div></div>');
        $compile(element)($scope);
        element.appendTo(document.body);
        $scope.$digest();

        element.prop('scrollTop', 42);
        element.trigger('scroll');

        expect($scope.scrollTopScopeVar).toBe(42);
    });

问题是传入的scrollTop变量（scrollTopScopeVar）永远不会更新。我很确定我的问题是我只更新了我对该变量的引用而实际上没有更改该值，但我不确定如何更改它。

感谢您的帮助！

Answer 1

哦，杜哈，这里的超级简单回答。我需要做的就是直接访问范围并在那里更改变量：

element.bind('scroll', function() {
    $scope.$apply(function() {
        $scope[attrs.scrollTop] = element.prop('scrollTop');  //DUH
        console.log("scrollTop", $scope[attrs.scrollTop]);
    });
});

如何更新作为属性传入的范围变量

1 个答案: