ng-scrollbars ne fonctionne pas à l'intérieur ng-view

Question

Situation: J'essaie d'utiliser ng-scrollbars qui est un wrapper pour Malihu's jQuery Custom Scrollbar by Manos Malihutsakis. J'essaie de l'utiliser avec angulaire.

Problème: Si je n'utilise pas ng-view, tout fonctionne correctement et comme prévu. Mais à l'intérieur ng-view, je ne peux pas faire défiler verticalement (œuvres horizontales!).

Mes codes:

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> 

Données d'échantillons pour $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 
    } 

}); 

Versions: Comme mentionné dans le dependencies de bower.json:

"dependencies": { 
    "angular": "~1.4.7", 
    "jquery": "~2.1.4", 
    "ng-scrollbars": "~0.0.5" 
} 

ouvrir également le fichier jquery.mCustomScrollbar.concat.min.js, énonce:

• jquery plugin mousewheel == Version: 3.1.13
• malih u jquery plugin scrollbar personnalisée == Version: 3.1.1

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

Answer 1

je trouve la racine du problème n'est pas le ng-scrollbars ou ses configurations. Le problème était que la largeur de l'emballage (appelé wrapper1) que j'appliqué la <ng-scrollbars> n'avait pas un spécifié width ou height et de l'autre côté de l'enveloppe à <ng-scrollbars> (appeler wrapper2) avait un fixe width et height, avec overflow: hidden , de sorte que wrapper1 croître plus grand que wrapper2, les barres de défilement n'étaient pas générés (pour problème vertical) ou étaient couverts sous wrapper2.

I fixé en appliquant <ng-scrollbars> à wrapper2 au lieu de wrapper1