Fatal编程技术网
  • angularjs/
  • AngularJS-将服务的不正确使用转换为指令

AngularJS-将服务的不正确使用转换为指令

angularjs

AngularJS-将服务的不正确使用转换为指令,angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat,Angularjs,Angularjs Directive,Angularjs Scope,Angularjs Ng Repeat,我有一张固定宽度的桌子；如果表格中的数据超过了定义的宽度，用户将无法左右滚动，因为我有一个CSS元素overflow:auto 我想做的是在表格的两侧引入按钮，这样用户就可以点击它们，表格就会向左或向右滚动 我使用Angular服务实现了这一点，但在ng单击时，表格只向左或向右滚动一次。我觉得这是因为我使用了服务，而不是指令 这是我的扑克牌： 单击上面的按钮，您将看到一个$error，我在我的项目中没有得到它，因为我也在使用jQuery HTML: <body ng-controller=

我有一张固定宽度的桌子；如果表格中的数据超过了定义的宽度，用户将无法左右滚动，因为我有一个CSS元素
overflow:auto

我想做的是在表格的两侧引入按钮，这样用户就可以点击它们，表格就会向左或向右滚动

我使用Angular服务实现了这一点，但在ng单击时，表格只向左或向右滚动一次。我觉得这是因为我使用了服务，而不是指令

这是我的扑克牌：

单击上面的按钮，您将看到一个$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>



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




六月
也许
四月
破坏
二月
简
12月
十一月
十月
九月
八月
七月
预处理
11
12
13
14
15
16
17
18
19
20
21
22
记录
10
09
12
13
04
21
14
15
20
25
17
15


JS:


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



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



var-app=angular.module（'myApp'，[]）；
app.controller（'MyController'，函数（$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=$（窗口）.width（）；
var pixelsToMove=0；
if（节索引的类型！=“未定义”）{
$（'#'+sectionID+sectionIndex）.scrollLeft（像素移动-100）；
pixelsToMove=pixelsToMove-100；
如果（像素移动=滚动视口宽度）{
pixelsToMove=滚动视口宽度；
}否则{
pixelsToMove=pixelsToMove；
}
}
}
};
});


如何删除“作为服务和使用”指令？
问题在于：


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


每次将
pixelsToMove
设置为0时，它只会向左滚动
到-100
，而不会以任何数字递增


干杯
谢谢你指出了一个看似愚蠢的错误！我可以声明var pixelsToMove=0；在函数之前的我的工厂下？我声明声明var pixelsToMove=0；在工厂下面工作。但是，这应该是一种服务吗？还是指令？读了一些书后，我觉得是有指导性的。是的，它应该是有指导性的，因为它是元素操纵的角色