angularjs - Using ui-grid constants to disable scrollbars

Question

With the latest version of ui-grid (v3.0.0-rc.16) it is possible to turn the horizontal and vertical scrollbar off seperately. I got this working by exchanging

$scope.gridOptions.enableScrollbars = false;

with

$scope.gridOptions.enableHorizontalScrollbar = 0;
$scope.gridOptions.enableVerticalScrollbar = 0;

In the sources of ui-grid there are three Constants defined for the scrollbars:

scrollbars: {
  NEVER: 0,
  ALWAYS: 1,
  WHEN_NEEDED: 2
}

Facing the fact that ui-grid is still unstable and changed very often, i would feel more comfortable using those constants instead of the specific values. But how can i access them ?

Plunker: http://plnkr.co/edit/h0ewAZK616rKCH3T62te

Answer 1

在github上得到了我的答案：

我需要做的就是像这样将 uiGridConstants 传递给我的控制器：

angular.module('myApp').controller('myCtrl',function($scope,uiGridConstants) {
    ...

    $scope.gridOptions.enableHorizontalScrollbar = uiGridConstants.scrollbars.NEVER;

    ...
})

Answer 2

与约翰爸爸风格：

ExampleController.$inject = ['$scope', 'uiGridConstants'];
function ExampleController($scope, uiGridConstants) {
    var vm = this;

    vm.gridOptions = {
        enableHorizontalScrollbar : uiGridConstants.scrollbars.NEVER,
        enableVerticalScrollbar   : uiGridConstants.scrollbars.NEVER
    };
}

Answer 3

解决方法（因为 WHEN_NEEDED 当前已禁用）是enableHorizontalScrollbar: 0在您的 gridOptions 上设置，然后在您的样式表中设置以下内容：

.ui-grid .ui-grid-render-container-body .ui-grid-viewport {
  overflow-x: auto !important;
}

现在水平滚动条只在需要时显示。