ng-scrollbars 在 ng-view 中不起作用

Question

情况：我正在尝试使用ng-scrollbars，它是Malihu's jQuery Custom Scrollbar by Manos Malihutsakis 的包装器。我正在尝试将它与角度一起使用。

问题：如果我不使用ng-view，一切正常并符合预期。但是在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
• malihu jquery 自定义滚动条插件 == 版本：3.1.1

http://manos.malihu.gr/jquery-custom-content-scroller/

Answer 1

我发现问题的根源不是ng-scrollbars 或其配置。问题是我应用<ng-scrollbars> 的包装器的宽度（称为wrapper1）没有指定的width 或height，另一方面，包装器到<ng-scrollbars>（称为@ 987654327@) 有一个固定的width 和height，与overflow: hidden，所以wrapper1 增长大于wrapper2，滚动条要么没有生成（垂直问题），要么被wrapper2 覆盖。

我通过将<ng-scrollbars> 应用到wrapper2 而不是wrapper1 来修复它