Scrollview with dynamic elements that have different height

Question

I would like to create a scrollView with elements that have different heights.

I think I am supposed to translate each views and apply an offset to each one of them but how I am supposed to do this if height is dynamic for each view (what's inside it) ?

I am trying to build a chat.

Thank you

Code taken from the famous/angular docs for scrollView

<fa-app ng-controller="ScrollCtrl">

<fa-scroll-view fa-pipe-from="myEventHandler">
  <fa-view ng-repeat="view in views"> // views have different heights//
    <fa-modifier fa-size="[undefined, undefined]">

       <fa-surface fa-pipe-to="myEventHandler">
      My surface with things inside it. what if its big?
       </fa-surface>
      </fa-modifier>
  </fa-view>

<script>
 angular.module('faScrollViewExampleApp', ['famous.angular'])
  .controller('ScrollCtrl', ['$scope', '$famous', function($scope, $famous) {

    var EventHandler = $famous['famous/core/EventHandler'];

    //$scope.views = some item with differents heights

    $scope.myEventHandler = new EventHandler();

}]);
 </script>

Answer 1

To adapt the height of a view based on its content, you shoud use [undefined, true], but it still has some issue, so be sure to check github for any fix.
In your case, to achieve your goal, I would suggest to use a Transitionable value that you can use to dynamically change the value of your view from you controller when you know the correct size.
Something like this:

Your view:

<fa-scroll-view fa-pipe-from="myEventHandler">
    <fa-view ng-repeat="view in views"> // views have different heights//
        <fa-modifier fa-size="view.rowSize.get()">
            <fa-surface fa-pipe-to="myEventHandler" fa-size="view.rowSize.get()">
                My surface with things inside it. what if its big?
            </fa-surface>
        </fa-modifier>
    </fa-view>
</fa-scroll-view>

Your controller:

angular.module('faScrollViewExampleApp', ['famous.angular'])
    .controller('ScrollCtrl', ['$scope', '$famous', '$http', function ($scope, $famous, $http) {

        var EventHandler = $famous['famous/core/EventHandler'];
        var Transitionable = $famous['famous/transitions/Transitionable'];

        $scope.myEventHandler = new EventHandler();

        // Initialize your transitionable with a default height of 100px
        var defaultRowSize = new Transitionable([undefined, 100]);

        // Loop through your views and set the default size for each of them

        angular.forEach($scope.views, function (view) {
            view.rowSize = defaultRowSize;
        })


        // I assume you are getting some data from a server, so you will have a $http request somewhere

        $http.get('yourserveraddress').success(function (data) {

            // Calculate the new height
            var newRowSize = aFunctionThatCalculateTheNewSize();

            // Get the view you want to update
            var viewToUpdate = $scope.views[theViewYouWantToChange];

            // Set the new height
            viewToUpdate.set([undefined, newRowSize]);

        });


    }]);