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

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 事件处理程序中，我有以下可用的

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

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

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

谢谢

Answer 1

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

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

$element[0].scrollWidth;

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

How to figure out the contents of an horizontal scrolling div in Angular

javascript

angularjs

dom