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

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]);
    });
});

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

How can I update a scope variable passed in as an attribute

javascript

scroll

angularjs

angularjs-directive