Question

我使用angular来创建一个水平滚动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'

      }
  });

在slideSelected事件处理程序中，我有以下可用

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

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

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

由于

Answer 1

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

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

$element[0].scrollWidth;

如何在Angular中找出水平滚动div的内容

1 个答案: