AngularJS - 將服務的錯誤使用轉換爲指令

我有一個固定寬度的表;如果表格中的數據超出了定義的寬度，那麼用戶可以左右滾動，因爲我有一個CSS元素overflow: auto;。AngularJS - 將服務的錯誤使用轉換爲指令

什麼，我試圖做的是在桌子的兩邊引進按鈕，以便用戶可以點擊他們，該表將滾動到左側或右側。

我已經實現了這個使用角服務，但在NG-點擊，該表只滾動向左或向右一次。我有一種感覺，這是因爲我使用了服務而不是指令？

這裏是我的plunker：http://plnkr.co/edit/3rYVry3YtJESCxI190QL?p=preview

在點擊上面的按鈕，你會看到一個錯誤$，我不想我的項目，因爲我使用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; 
     } 
     } 
    } 
    }; 
});

我怎麼會去撤除服務和使用的指令？

來源

2014-06-12 Oam Psy

的問題是在這裏：

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

每次設置pixelsToMove爲0，那麼它只能滾動scrollLeft to -100時間，你不要被任何數量的增加它

乾杯

來源

2014-06-12 08:53:37 maurycy

感謝指點看起來像一個非常愚蠢的錯誤！我可以聲明var pixelsToMove = 0;在我的工廠之前的職能？ –

我宣佈聲明var pixelsToMove = 0;在工廠下面，它的工作原理。但是，這應該是一項服務嗎？或者一個指令？我讀完一些東西后我覺得指導。 –

是的，它應該是指令，因爲它是元素操作的角色 – maurycy

AngularJS - 將服務的錯誤使用轉換爲指令

回答

相關問題