AngularJS - Converting Incorrect Use of Service To Directive

问题

I have a table with a fixed width; if the data within the table exceeds the defined width, the user that the ability to scroll left and right as i have a CSS element of overflow: auto;.

What i am trying to do is introduce buttons on either side of the table, so that the user can click on them, and the table will scroll to the left or right.

I have achieved this using an Angular service, but on ng-click, the table only scrolls left or right once. I have a feeling this is because i have used a service, rather than a directive?

Here's my plunker: http://plnkr.co/edit/3rYVry3YtJESCxI190QL?p=preview

On clicking buttons in the above, you'll see a $ error, i do not get this on my project as i am using jQuery too.

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

How would i go about removing as service and use directive?

回答1:

The problem is here:

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

every time you set pixelsToMove to 0 so then it only scrolls scrollLeft to -100 and you don't increment it by any number

Cheers

来源：https://stackoverflow.com/questions/24180020/angularjs-converting-incorrect-use-of-service-to-directive

标签

angularjs

angularjs-directive

angularjs-scope

angularjs-ng-repeat