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

Question

情况： 我正在尝试使用 ng-scrollbars that is a wrapper for Malihu's jQuery Custom Scrollbar by Manos Malihutsakis。我正在尝试将它与 angular 一起使用。

问题： 如果我不使用 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>（称之为 wrapper2）有固定的 width 和 height，overflow: hidden，因此 wrapper1 比 [=16 大=]，滚动条要么没有生成（垂直问题），要么被 wrapper2 覆盖。

我通过将 <ng-scrollbars> 应用于 wrapper2 而不是 wrapper1

来修复它

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

ng-scrollbars does not work inside ng-view

angularjs

custom-scrolling

mcustomscrollbar