ng-scroll-viewport: Cannot read property 'documentElement' of undefined

[katowulf]

Hi Gents,

I'm struggling to get ui-scroll to work. It works as expected if I remove the wrapping div which contains the viewport directive. Whenever I declare an ng-scroll-viewport, I receive this error:

TypeError: Cannot read property 'documentElement' of undefined
at scrollHeight (http://localhost:63342/app/lib/ui-utils.js:1335:69)
at Object.adapter.bottomDataPos (http://localhost:63342/app/lib/ui-utils.js:1396:35)
at doAdjustment (http://localhost:63342/app/lib/ui-utils.js:1543:193)
at adjustBuffer (http://localhost:63342/app/lib/ui-utils.js:1565:32)
at reload (http://localhost:63342/app/lib/ui-utils.js:1429:29)
at Object.fn (http://localhost:63342/app/lib/ui-utils.js:1642:29)
at Scope.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js:11783:29)
at Scope.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js:12036:24)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js:1301:15
at Object.invoke (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js:3704:17) 

I tried grabbing the latest ui-utils.js from the master branch, as well as the 0.1.1 release tag, I also tried using the latest ui-scroll.js and ui-scroll-jqlite.js files with no joy.

I've tried variations of height on the elements, overflow, position absolute/relative with no change. Here's a repro: http://plnkr.co/edit/8EHCmDd0Qwtz2Z8tSQ25?p=preview

Cheers,

[mfeingold]

The height of the viewport should be always constrained in your plunk it is not. Look at the note at the bottom of the Description paragraph for more details

[katowulf]

@mfeingold Thanks for that! It looks like the css has .ng-scroll-viewport instead of [ng-scroll-viewport], which did fix the error. Cheers for that.

To offer a bit of feedback from a green user who actually bothered to read that document, and not for the sake of discrediting that great find, the documentation does not say it must be constrained. It states:

Important: The viewport height has to be constrained because the directive will stop asking the datasource for more elements only when it has enough to fill out the viewport. If the height of the viewport is not constrained (style="height:auto") this will never happen and the directive will try to pull the entire content of the datasource.

In summary, it says if it's not constrained, it pulls the entire contents of the data source (nothing about an error). This is also untrue in the case of the body, which works fine with or without a height constraint, which makes this paragraph even less credible.

And last but not least, I'll just go ahead and suggest that Cannot read property 'documentElement' of undefined could be improved upon greatly, and doesn't give any impression of a missing height attribute.

Have a great day!

[mfeingold]

Thank you for your feedback. I agree, this paragraph deserves some editing.

As to the obscure exception - you also have a point. I can easily improve diagnostics for this particular case. Unfortunately, to make it really useful I would need to find a way to detect that its computed style height is 'auto'. There is no way to do that other than manually traverse hierarchy of both the elements and the css styles. At least I did not find any.

In other words if for instance you put some text inside the viewport div, the error will go away, but the scroller will still be useless - if you need full content, no need for scroller, use ng-repeat