mdbootstrap / perfect-scrollbar

Minimalistic but perfect custom scrollbar plugin. Get more free components with Material Design for Bootstrap UI Kit (link below)
https://perfectscrollbar.com/
MIT License
343 stars 65 forks source link

How to use perfect scrollbar with angularjs #123

Open GNSubrahmanyam opened 6 years ago

GNSubrahmanyam commented 6 years ago

@julien @DanielApt @srcn @amir-hadzic @jaronkk

my code:
 $window.PerfectScrollbar.initialize('.ace_scrollbar-v', {
  wheelSpeed: 2,
  wheelPropagation: true,
  minScrollbarLength: 20
})

Error

angular.js:14800 TypeError: Cannot read property 'add' of undefined
    at Object.module.exports [as initialize] (perfect-scrollbar.js:1097)
    at Object.scrollbar (app.js:225)
    at $scope.aceLoaded (app.js:174)
    at ui-ace.js:122
    at Object.forEach (angular.js:408)
    at setOptions (ui-ace.js:120)
    at updateOptions (ui-ace.js:305)
    at Object.link (ui-ace.js:312)
    at angular.js:1383
    at invokeLinkFn (angular.js:10619) "<div id="editor" ui-ace="{
            onLoad: aceLoaded, 
            onChange: aceChanged,            
            useWrapMode : editor.useWrapMode, 
            showGutter: editor.gutter, 
            theme:editor.theme, 
            mode: editor.mode}" ng-model="value" class="ng-pristine ng-untouched ng-valid ace_editor ace-tm">"

if I use

scrollbars = document.querySelectorAll('.ace_scrollbar-v, .ace_scrollbar-h')
const ps = new PerfectScrollbar(scrollbars)
ps.update();

Error:

angular.js:14800 TypeError: PerfectScrollbar is not a constructor
    at Object.scrollbar (app.js:226)
    at $scope.aceLoaded (app.js:174)
    at ui-ace.js:122
    at Object.forEach (angular.js:408)
    at setOptions (ui-ace.js:120)
    at updateOptions (ui-ace.js:305)
    at Object.link (ui-ace.js:312)
    at angular.js:1383
    at invokeLinkFn (angular.js:10619)
    at nodeLinkFn (angular.js:10008) "<div id="editor" ui-ace="{
            onLoad: aceLoaded, 
            onChange: aceChanged,            
            useWrapMode : editor.useWrapMode, 
            showGutter: editor.gutter, 
            theme:editor.theme, 
            mode: editor.mode}" ng-model="value" class="ng-pristine ng-untouched ng-valid ace_editor ace-tm">"
julien commented 2 years ago

@GNSubrahmanyam no idea why you mentioned me, but my suggestion would be to ask in an angular related forum since this project has nothing to do with angular itself.

konstantinschuette commented 1 year ago

A bit late to the party. It works with Angular 13. Here is my demo sample: https://github.com/konstantinschuette/perfect-scrollbar-angular

GNSubrahmanyam commented 1 year ago

@julien i have no idea my you are replying after 4 years