Angular + ngScrollbar

Question

I am trying angular + scrollbar [https://github.com/iominh/ng-scrollbars], however not able to make it work. It just gives module error and show text. in codepen it doesn't even show text. any help Plunker and codepan

<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.0/jquery.mCustomScrollbar.min.css" type="text/css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.0/jquery.mCustomScrollbar.concat.min.js"></script>
  <script src="https://raw.githubusercontent.com/iominh/ng-scrollbars/master/src/scrollbars.js"></script>
  <script>
    var app = angular.module('app', ['ngScrollbars']);
    app.config(function(ScrollBarsProvider) {
      // scrollbar defaults
      ScrollBarsProvider.defaults = {
        autoHideScrollbar: false,
        setHeight: 100,
        scrollInertia: 0,
        axis: 'yx',
        advanced: {
          updateOnContentResize: true
        },
        scrollButtons: {
          scrollAmount: 'auto', // scroll amount when button pressed
          enable: true // enable scrolling buttons by default
        }
      };
    });

    function MainController($scope) {
      // example of overriding defaults per scrollbar
      $scope.scrollbarConfig = {
        theme: 'dark',
        scrollInertia: 500
      }
    }

    app.controller('mainCtrl', MainController);
  </script>
</head>

<body ng-app="app" ng-controller="mainCtrl">

  <div style="width: 200px;" ng-scrollbars ng-scrollbars-config="scrollbarConfig">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ornare magna ultrices tincidunt tincidunt. Donec sagittis lorem placerat iaculis vehicula. Nunc bibendum quam vel rutrum rutrum. Duis nunc dolor, vehicula vitae pulvinar eu, semper vitae eros.
    Proin auctor, felis placerat posuere dictum, massa ipsum fermentum ipsum, sit amet tincidunt metus justo ut dui. Curabitur aliquet tempor dolor eget volutpat. Proin consequat metus id justo interdum, id porta justo venenatis. Nullam vel tristique
    neque, at luctus velit. Nulla sit amet convallis felis.
  </div>

</body>

</html>

Icycool · Accepted Answer · 2015-10-09 02:59:56Z

3

Updated your codepen with 3 changes: codepen

Updated link to ngscrollbars file: github doesn't allow the files to be used as script directly, change host to rawgit.com will do

https://rawgit.com/iominh/ng-scrollbars/master/src/scrollbars.js

You misspelled the directive: ng-scrollbars (note the last 's')
The height CSS needs to be in the same level with the directive.

<ul ng-scrollbars style = "height: 100px;">

answered Oct 9, 2015 at 2:59

Icycool

7,1991 gold badge27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular + ngScrollbar

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related