Question

我有一张固定宽度的桌子;如果表中的数据超出定义的宽度，则用户可以左右滚动，因为我有一个CSS元素overflow: auto;。

我要做的是在桌子两侧引入按钮，以便用户可以点击它们，桌子将向左或向右滚动。

我使用Angular服务实现了这一点，但是在ng-click上，该表只向左或向右滚动一次。我有一种感觉，这是因为我使用的是服务，而不是指令？

这是我的傻瓜：http://plnkr.co/edit/3rYVry3YtJESCxI190QL?p=preview

点击上面的按钮，你会看到$ error，我不会在我的项目中得到这个，因为我也在使用jQuery。

HTML：

<body ng-controller="MyController">


<div >
    <div class="scrollable my-table" ng-init="sectionIndex = $index; sectionID='my-table'" id="my-table">
      <table>
        <tr>
          <th></th>
          <th>Jun</th>
          <th>May</th>
          <th>Apr</th>
          <th>Mar</th>
          <th>Feb</th>
          <th>Jan</th>
          <th>Dec</th>
          <th>Nov</th>
          <th>Oct</th>
          <th>Sep</th>
          <th>Aug</th>
          <th>Jul</th>
        </tr>
        <tbody>
          <tr>
            <th>Preditcion</th>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
            <td>15</td>
            <td>16</td>
            <td>17</td>
            <td>18</td>
            <td>19</td>
            <td>20</td>
            <td>21</td>
            <td>22</td>
          </tr>
          <tr>
            <th>Recored</th>
            <td>10</td>
            <td>09</td>
            <td>12</td>
            <td>13</td>
            <td>04</td>
            <td>21</td>
            <td>14</td>
            <td>15</td>
            <td>20</td>
            <td>25</td>
            <td>17</td>
            <td>15</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="scroll-btns-area">
      <div class="scroll-btns">
        <div class="scroll-left" ng-click="scrollLeft(sectionIndex, sectionID)">
          <img src="http://www.designofsignage.com/application/symbol/hospital/image/600x600/arrow-left.jpg" width="25px">
        </div>
        <div class="scroll-right" ng-click="scrollRight(sectionIndex, sectionID)">
          <img src="http://www.designofsignage.com/application/symbol/hospital/image/600x600/arrow-right.jpg" width="25px">
        </div>
      </div>
    </div>
  </div>
</body>

JS：

var app = angular.module('myApp', []);

app.controller('MyController', function($scope, scrollLeftRightService) {

  $scope.scrollLeft = scrollLeftRightService.moveLeft;
  $scope.scrollRight = scrollLeftRightService.moveRight;

});

app.factory('scrollLeftRightService', function() {

  return {
    moveLeft: function(sectionIndex, sectionID) {

      console.log("sectionIndex = " + sectionIndex);
      console.log("sectionID = " + sectionID);

      var scrollViewport_width = $(window).width();
      var pixelsToMove = 0;

      if (typeof sectionIndex != 'undefined') {

        $('#' + sectionID + sectionIndex).scrollLeft(pixelsToMove - 100);
        pixelsToMove = pixelsToMove - 100;

        if (pixelsToMove <= 0) {
          pixelsToMove = 0;
        } else {
          pixelsToMove = pixelsToMove;
        }

      } else {
        $('#' + sectionID).scrollLeft(pixelsToMove - 100);
        pixelsToMove = pixelsToMove - 100;

        if (pixelsToMove <= 0) {
          pixelsToMove = 0;
        } else {
          pixelsToMove = pixelsToMove;
        }
      }
    },
    moveRight: function(sectionIndex, sectionID) {

      console.log("sectionIndex = " + sectionIndex);
      console.log("sectionID = " + sectionID);

      var scrollViewport_width = $(window).width();
      var pixelsToMove = 0;

      if (typeof sectionIndex != 'undefined') {

        $('#' + sectionID + sectionIndex).scrollLeft(pixelsToMove + 100);
        pixelsToMove = pixelsToMove + 100;

        if (pixelsToMove >= scrollViewport_width) {
          pixelsToMove = scrollViewport_width;
        } else {
          pixelsToMove = pixelsToMove;
        }

      } else {
        $('#' + sectionID).scrollLeft(pixelsToMove + 100);
        pixelsToMove = pixelsToMove + 100;

        if (pixelsToMove >= scrollViewport_width) {
          pixelsToMove = scrollViewport_width;
        } else {
          pixelsToMove = pixelsToMove;
        }
      }
    }
  };
});

我将如何删除服务和使用指令？

Answer 1

问题在于：

var pixelsToMove = 0;
...
$('#' + sectionID + sectionIndex).scrollLeft(pixelsToMove - 100);

每当您将pixelsToMove设置为0时，它只会滚动scrollLeft to -100并且您不会将其递增任何数字

干杯

AngularJS - 将错误的服务使用转换为指令

1 个答案: