71297

AngularJS - Converting Incorrect Use of Service To Directive

Question:

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: <a href="http://plnkr.co/edit/3rYVry3YtJESCxI190QL?p=preview" rel="nofollow">http://plnkr.co/edit/3rYVry3YtJESCxI190QL?p=preview</a>

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.

<strong>HTML:</strong>

<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>

<strong>JS:</strong>

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?

Answer1:

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

Recommend

  • GET multiple values in a search request
  • How do you check if a JSON array is an array of objects or primitives recursively
  • Nokogiri: how to find the selected option of ?
  • Keybinding keys to insert custom code Eclipse
  • Why doesn't my checkbox map to an MVC model member?
  • Symfony2 - Composer class loader instance in controller
  • Spring Security: @PreAuthorize works only together with @RequestMapping
  • When HTTP-POST has body, url parameter is null
  • Does Apportable support to build library binary (.a/.so)?
  • Adding elements to a huge XML file
  • Jenkins: FATAL: Could not initialize class hudson.util.ProcessTree$UnixReflection
  • Alternative To body {overflow:scroll;} That Will Prevent Page Jostling/Wriggling?
  • Blackberry - Custom EditField Cursor
  • Sencha Touch 2.0 Controller refs attribute not working?
  • Play WS (2.2.1): post/put large request
  • Android full screen on only one activity?
  • Switching to Release Build causes runtime error in Web Reference
  • Django: Count of Group Elements
  • Fetching methods from BroadcastReceiver to update UI
  • Symfony2: How to get request parameter
  • jQuery tmpl and DataLink beta
  • QuartzCore.framework for Mono Develop
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • GridView Sorting works once only
  • bootstrap to use multiple ng-app
  • How to get icons for entities from eclipse?
  • How to disable jQuery.jplayer autoplay?
  • WPF Applying a trigger on binding failure
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • JaxB to read class hierarchy
  • costura.fody for a dll that references another dll
  • Binding checkboxes to object values in AngularJs
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • java string with new operator and a literal
  • How to load view controller without button in storyboard?