如何计算Angular中水平滚动div的内容

Question

我使用angular创建一个水平滚动的div，该div应滚动到div内的活动内容。每次活动内容更改时，指令控制器都会触发并捕获一个自定义的slideSelected事件。

这是我的控制器：

angular.module('testAppApp')
  .controller('AcsmartscrollCtrl', ['$scope', '$element', function ($scope, $element) {
    console.log('acSmartScrollCtrl');
    $scope.$on('slideSelected', function(event, slide){
        if (!slide.reasonistime){
            console.log($element);
            // Here I should be able to figure out the logic for scrolling
        }
    });
  }]);

这里是我的指令定义：

angular.module('testAppApp')
  .directive('acSmartScroll', function () {
    return {
      template: '<div class="smartscroll" ng-transclude></div>',
      restrict: 'A',
      transclude: true,
      controller: 'AcsmartscrollCtrl'
      }
  });

在幻灯片选择的事件处理程序中，我有以下可用的

• 控制器作用域中包含指令元素及其所有内容的$元素
• 通过slide.numofslides滚动div（本例中为图像）内的元素总数
• 和当前活动元素通过slide.order

我的意图是使用$element.scrollWidth来获得div内容与滚动的总宽度，然后计算我必须从slide.order/slide.numofslides*$element.secrollWidth按比例应用的滚动

我的问题是$element.scrollWidth似乎没有定义。有没有一种方法可以获得div的所有内容的宽度，即使它们由于滚动而不可见？

感谢

Answer 1

$元素是jqLite或jQuery的实例（如果您正在使用它）。

要获得DOM元素本身的实例，请使用

$element[0].scrollWidth;