0
情况：我试图使用ng-scrollbars，它是Malihu's jQuery Custom Scrollbar by Manos Malihutsakis的包装。我正在尝试与角度一起使用它。如果我不使用ng-view，一切工作正常，并按预期。但在ng-view里面，我不能垂直滚动（水平作品！）。ng-scrollbars在ng-view中不起作用
我的代码：
app.js
angular.module('app', ['ngScrollbars'])
.config(function (ScrollBarsProvider) {
ScrollBarsProvider.defaults = {
mouseWheelPixels: 150,
theme: "minimal",
live: true,
advanced:{
updateOnContentResize: true,
autoExpandHorizontalScroll: true,
autoExpandVerticalScroll: true,
updateOnSelectorChange: true
},
scrollButtons: {
enable: true,
scrollAmount: 'auto'
},
axis: 'yx',
autoHideScrollbar: true
};
$routeProvider
.when('/agent/list', {
templateUrl: '/partials/agent/list',
controller: 'inAgentListCtrl'
});
});
/partials/agent/list.html
<div ng-scrollbars="ng-scrollbars" class="inListWrapper">
<table class="table">
<tr>
<th>ID</th>
<th>View</th>
<th>Delete</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr ng-repeat="agent in agents" ng-hide="agent.isDeleted">
<td>{{agent._id}}</td>
<td><a ng-href="/agent/view/{{agent._id}}">{{agent._id}}</a></td>
<td><a ng-href="#" ng-click="delete.open(agent)">{{agent._id}}</a></td>
<td>{{agent.firstName}}</td>
<td>{{agent.lastName}}</td>
</tr>
</table>
</div>
示例数据$scope.agents
[{"_id":"1125","__v":0},{"_id":"1309","__v":0},{"_id":"1269","__v":0},{"_id":"1224","__v":0},{"_id":"1222"
,"__v":0},{"_id":"1195","__v":0},{"_id":"384","__v":0},{"_id":"1301","__v":0},{"_id":"1225","__v":0}
,{"_id":"1081","__v":0},{"_id":"404","__v":0},{"_id":"1296","__v":0},{"_id":"1307","__v":0},{"_id":"1199"
,"__v":0},{"_id":"1287","__v":0},{"_id":"1220","__v":0},{"_id":"1178","__v":0},{"_id":"1303","__v":0
},{"_id":"1280","__v":0},{"_id":"1232","__v":0},{"_id":"1306","__v":0},{"_id":"1208","__v":0},{"_id"
:"1123","__v":0},{"_id":"1217","__v":0},{"_id":"1278","__v":0},{"_id":"1251","__v":0},{"_id":"1016","__v"
:0},{"_id":"1295","__v":0},{"_id":"1228","__v":0},{"_id":"1095","__v":0},{"_id":"390","__v":0},{"_id"
:"1310","__v":0},{"_id":"1298","__v":0},{"_id":"1054","__v":0},{"_id":"1312","__v":0},{"_id":"1196","__v"
:0},{"_id":"1093","__v":0},{"_id":"1304","__v":0},{"_id":"1318","__v":0},{"_id":"361","__v":0},{"_id"
:"1121","__v":0},{"_id":"1302","__v":0},{"_id":"1290","__v":0},{"_id":"1234","__v":0},{"_id":"1240","__v"
:0},{"_id":"1108","__v":0},{"_id":"1247","__v":0},{"_id":"1293","__v":0},{"_id":"1289","__v":0},{"_id"
:"1120","__v":0},{"_id":"1285","__v":0},{"_id":"1279","__v":0},{"_id":"1315","__v":0},{"_id":"1299","__v"
:0},{"_id":"1011","__v":0},{"_id":"1248","__v":0},{"_id":"1160","__v":0},{"_id":"1130","__v":0},{"_id"
:"1205","__v":0},{"_id":"436","__v":0},{"_id":"1164","__v":0},{"_id":"1286","__v":0},{"_id":"1271","__v"
:0},{"_id":"1132","__v":0},{"_id":"1313","__v":0},{"_id":"1263","__v":0},{"_id":"144","__v":0},{"_id"
:"296","__v":0},{"_id":"1241","__v":0},{"_id":"1268","__v":0},{"_id":"1077","__v":0},{"_id":"1275","__v"
:0},{"_id":"1023","__v":0},{"_id":"1277","__v":0},{"_id":"1229","__v":0},{"_id":"1203","__v":0},{"_id"
:"1270","__v":0},{"_id":"1022","__v":0},{"_id":"1167","__v":0},{"_id":"364","__v":0},{"_id":"1284","__v"
:0},{"_id":"1244","__v":0},{"_id":"349","__v":0},{"_id":"1252","__v":0},{"_id":"1265","__v":0},{"_id"
:"1254","__v":0},{"_id":"1267","__v":0},{"_id":"1297","__v":0},{"_id":"1294","__v":0},{"_id":"1316","__v"
:0},{"_id":"1319","__v":0},{"_id":"1236","__v":0}]
inAgentListCtrl.js
angular.module('app').controller('inAgentListCtrl', function ($scope, inAgent, $location) {
$location.replace();
$scope.agents = inAgent.query();
$scope.delete = $scope.delete || {};
$scope.delete.open = function (agent) {
// Implementaion
}
});
版本：如bower.json的dependencies提到：
"dependencies": {
"angular": "~1.4.7",
"jquery": "~2.1.4",
"ng-scrollbars": "~0.0.5"
}
另外打开文件jquery.mCustomScrollbar.concat.min.js，规定：
- jquery的鼠标滚轮插件==版本：3.1.13
- malih ü定制的jQuery插件，滚动条==版本：3.1.1
http://manos.malihu.gr/jquery-custom-content-scroller/