AngularJS - 将服务的错误使用转换为指令 [英] AngularJS - Converting Incorrect Use of Service To Directive

查看：21
本文介绍了AngularJS - 将服务的错误使用转换为指令的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

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

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

点击上面的按钮时，你会看到一个 $ 错误，我在我的项目中没有得到这个，因为我也在使用 jQuery.

HTML:

<div ><div class="scrollable my-table" ng-init="sectionIndex = $index; sectionID='my-table'" id="my-table"><表格><tr><th></th><th>Jun</th><th>May</th><th>Apr</th><th>Mar</th><th>二月</th><th>Jan</th><th>Dec</th><th>Nov</th><th>Oct</th><th>Sep</th><th>八月</th><th>7月</th></tr><tr><th>预测</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>记录的</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>

<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 class="scroll-right" ng-click="scrollRight(sectionIndex, sectionID)"><img src="http://www.designofsignage.com/application/symbol/hospital/image/600x600/arrow-right.jpg" width="25px">

JS:

var app = angular.module('myApp', []);app.controller('MyController', function($scope, scrollLeftRightService) {$scope.scrollLeft = scrollLeftRightService.moveLeft;$scope.scrollRight = scrollLeftRightService.moveRight;});app.factory('scrollLeftRightService', function() {返回 {moveLeft:函数(sectionIndex，sectionID){console.log("sectionIndex = " + sectionIndex);console.log("sectionID = " + sectionID);var scrollViewport_width = $(window).width();var pixelToMove = 0;if (typeof sectionIndex != 'undefined') {$('#' + sectionID + sectionIndex).scrollLeft(pixelsToMove - 100);pixelToMove = pixelToMove - 100;如果(pixelsToMove <= 0){像素移动 = 0;} 别的 {pixelToMove = pixelToMove;}} 别的 {$('#' + sectionID).scrollLeft(pixelsToMove - 100);pixelToMove = pixelToMove - 100;如果(pixelsToMove <= 0){像素移动 = 0;} 别的 {pixelToMove = pixelToMove;}}},向右移动:函数(sectionIndex，sectionID){console.log("sectionIndex = " + sectionIndex);console.log("sectionID = " + sectionID);var scrollViewport_width = $(window).width();var pixelToMove = 0;if (typeof sectionIndex != 'undefined') {$('#' + sectionID + sectionIndex).scrollLeft(pixelsToMove + 100);pixelToMove = pixelToMove + 100;如果(pixelsToMove >= scrollViewport_width){pixelToMove = scrollViewport_width;} 别的 {pixelToMove = pixelToMove;}} 别的 {$('#' + sectionID).scrollLeft(pixelsToMove + 100);pixelToMove = pixelToMove + 100;如果(pixelsToMove >= scrollViewport_width){pixelToMove = scrollViewport_width;} 别的 {pixelToMove = pixelToMove;}}}};});

我将如何删除 as service 和 use 指令?

解决方案

问题出在这里:

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

每次您将 pixelsToMove 设置为 0 时，它只会将 scrollLeft 滚动到 -100 而不会增加任何数字

干杯

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?

解决方案

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

这篇关于AngularJS - 将服务的错误使用转换为指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆