when-visible and when-not visible not working

[holuwaseun]

Hi,

I'm trying to use this directive, but for some reason, the functions I supplied to the when-visible and when-not-visible attributes of the element fail to run. Below is my source. Please any help will be greatly appreciated. Thanks

HTML
when-visible="animateElementIn" when-not-visible="animateElementOut"

Angular Controller
$scope.animateElementIn = ($el) => { $el.removeClass('hidden'); $el.addClass('animated fadeInLeft'); };

$scope.animateElementOut = ($el) => { $el.addClass('hidden'); $el.removeClass('animated fadeInLeft'); };

Also, if i change
when-visible="animateElementIn"

to
when-visible="animateElementIn()"

I get an error that says
angular.js:14525 TypeError: Cannot read property 'removeClass' of undefined at b.$scope.animateElementIn (http://localhost/wgr/public/app/controllers/wgr.controller.js:9:16) at fn (eval at compile (http://localhost/wgr/node_modules/angular/angular.min.js:239:266), <anonymous>:4:168) at m.d.(anonymous function) [as whenVisible] (http://localhost/wgr/node_modules/angular/angular.min.js:87:238) at new controller (http://localhost/wgr/bower_components/angular-scroll-animate/dist/angular-scroll-animate.js:82:61) at Object.invoke (http://localhost/wgr/node_modules/angular/angular.min.js:44:171) at S.instance (http://localhost/wgr/node_modules/angular/angular.min.js:94:35) at n (http://localhost/wgr/node_modules/angular/angular.min.js:69:42) at g (http://localhost/wgr/node_modules/angular/angular.min.js:61:496) at g (http://localhost/wgr/node_modules/angular/angular.min.js:62:12) at g (http://localhost/wgr/node_modules/angular/angular.min.js:62:12) "<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 padding-all-0 ng-scope" ui-view="" data-ng-animate="1">"

[rpocklin]

Does the example work when you checkout this codebase and run npm i && grunt serve?