如何更新作爲屬性傳入的作用域變量

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

和這裏的噶測試我寫它的一部分：

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