Famous / famous-angular

Bring structure to your Famo.us apps with the power of AngularJS. Famo.us/Angular integrates seamlessly with existing Angular and Famo.us apps.
https://famo.us/angular
Mozilla Public License 2.0
1.92k stars 275 forks source link

Scrollviews on resize show error in console. #322

Closed steveblue closed 7 years ago

steveblue commented 9 years ago

Uncaught TypeError: Cannot read property '_' of null.

The stack trace leads to the _bindEvents() function in the Scrollview

    this._eventInput.on('resize', function() {
        this._node._.calculateSize(); /* error on this line */
    }.bind(this));

Upon inspecting the ScrollView's RenderNode via $famous.find provider the Scrollview._node is set to ViewSequence and this method doesn't seem to exist on the object. The ScrollView is resizing, but probably because we have a Responsive framework that is modifying the size of all it's children. It doesn't seem like the actual size of the Scrollview is updating.

jordanpapaleo commented 9 years ago

Ill take a look at this when I get back into the office on Tuesday. So something you may want to try is not using an undefined state on the modifiers fa-size in the scroll view. I put a function into scope that just reads window.innerHeight/width/ or and other measurement. Then I used that for my fa-size on my modifier. I literally just had to do this but I think it is a famo.us issue.

Have a nice weekend,

Jordan

steveblue commented 9 years ago

We'll be testing this possible fix within our web app today, will get back to you.

steveblue commented 9 years ago

Ok, we found the source of the problem, it was a stray div in-between a fa-modifier and fa-view. Definitely just an implementation issue.

janober commented 9 years ago

Did run into the same issue. Have something like that:

  <fa-scroll-view fa-pipe-from="myEventHandler">
      <entry ng-repeat="entry in entries" fa-pipe-to="myEventHandler" />
  </fa-scroll-view>

Entry gets then replaced with a fa-modifier. Do not find a solution for that problem. The above does not work becuase of the "Uncaught TypeError: Cannot read property '_' of null." error. Replacing the entry with something like:

<fa-modifier entry ng-repeat="entry in entries" fa-pipe-to="myEventHandler"></fa-modifier>

Would work if there would then not be the obvious collision. And also wrapping entry in a "fa-view" works but then the whole scroll-view does not work anymore because all entries are simply on top of each other.

Is there any workaround for that?

janober commented 9 years ago

Ehm interesting now it suddently works. Had then probably something to do with the content of the entry-directive, ....

steveblue commented 9 years ago

@janober transcluding custom directives inside a famous-angular directive has mixed results. I've gotten it to work in multiple instances but the moment it starts to scale beyond a simple example strange errors start to appear in the console, especially inside the Scrollview. I wish someone could nail down when exactly the scrollView's node gets set to null. I'm currently refining an implementation using a GenericSync to move a SequentialLayout similar to ScrollView but without the overhead of the Physics Engine. Will share my findings when I can package it into a module.

steveblue commented 9 years ago

This error keeps reappearing, so I am reopening.

janober commented 9 years ago

Great, thanks a lot! Look forward to it. Will keep my eyes open when I run into that issue again...