iScroll in angularjs directive

Question

I am trying to implement horizontal iScroll using angular directive.

Here is my directive code.

link: function(scope, elem, attrs) {
        scope.winWidth = window.innerWidth;
        scope.iScrollWidth = scope.winWidth *8.5 +'px';
        jQuery(angular.element(attrs.thelist)).css({'width':scope.iScrollWidth}); 

        var k_videoScroll = new iScroll(angular.element(attrs.scrollwrap),{
            snap: true,
            bounce: false,
            checkDOMChanges: false,
            momentum: false,
            hScrollbar: false,
            vScrollbar: false,
            overflow: false
        });

I have a div tag in my html page with id related to attrs.scrollwrap

<div id="videolist" class="videoScrollWrap" options="#thelist" wrapper="#deal-wrap"   scrollwrap="#videoReviewsWrap">    
   <div id="videoReviewsWrap">
      <ul id="thelist">
         <li id='deal-wrap' ng-repeat="video in videoList" videoList='video'></li>
      </ul>
    </div>
</div>

The issue i am stuck with is 'Cannot set property 'overflow' of undefined'.

TypeError: Cannot set property 'overflow' of undefined
at Object.iScroll (http://localhost/swordfish/web/js/lib/iscroll.js:89:31)
at setScroll (http://localhost/swordfish/web/js/directives/d-product-details.js:395:33)
at link (http://localhost/swordfish/web/js/directives/d-product-details.js:405:13)
at o (http://localhost/swordfish/web/js/lib/angular/angular.min.js:42:187)
at e (http://localhost/swordfish/web/js/lib/angular/angular.min.js:38:28)
at http://localhost/swordfish/web/js/lib/angular/angular.min.js:37:118
at <error: illegal access>
at Object.e.$broadcast (http://localhost/swordfish/web/js/lib/angular/angular.min.js:88:517)
at http://localhost/swordfish/web/js/lib/angular/angular.min.js:81:85
at i (http://localhost/swordfish/web/js/lib/angular/angular.min.js:76:207) <div id="videolist" class="videoScrollWrap ng-isolate-scope ng-scope" options="#thelist" wrapper="#deal-wrap" scrollwrap="#videoReviewsWrap"> angular.min.js:60

(anonymous function)

What might be the issue? It seems the syntax for defining new iScroll is not correct. What is the correct way to do that?

Thanks in advance!

Answer 1

I figured out the issue. It's because when i try to get the (attrs.scrollwrap) it is actually retuning the object. But the iScroll library is trying to get the objects child elements directly, and set the style property of that object. The issue is solved once i try to access the div element using (attrs.scrollwrap[0]).