AngularJS - 将服务的错误使用转换为指令 [英] AngularJS - Converting Incorrect Use of Service To Directive
问题描述
我有一个固定宽度的桌子;如果表中的数据超过定义的宽度,用户可以左右滚动,因为我有一个 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天全站免登陆