How to use ui-scroll with ui-router?

[theks]

In ui-router controller, datasource need to be resolved. Can I have a demo? thx.

[theks]

It will not work, when height of the '.viewport' element is 0. So I set the 'min-height' property.

[dhilt]

Yes, as it follows from the doc -- "viewport height must be constrained". Regarding to routing stuff, we have no demo, but may be this story can help you: https://github.com/angular-ui/ui-scroll/issues/83. If not, please specify your issue so we'll try to find out what happens.

[moosi]

I think I got your problem (code is not runnable, it's only showing the idea). Let's say this is your state:

.state('index', {
    url: "/",
    templateUrl: "some-template.html",
})

Simply use ng-init inside of 'some-template.html': <div ng-controller="testCtrl as test" ng-init="test.init()"> <div>

Your init method is using a promise to tell your datasource once the data is ready:

app.controller('testCtrl', function ($scope, $q) {
    function init () {
      // Use this promise to tell ui-scroll that the data is loaded
      var deferred = $q.defer();
      $scope.promise = deferred.promise;

      RemoteData.getDataAsync()
        .then(function (data) {
          $scope.data = data;
          deferred.resolve();
        })
    }
}

Finally wait for the promise inside of your get function of the data source:

$scope.dataSource = {
      get: function (index, count, success) {

        // If promise is not resolved, wait for the promise
        if (!$scope.promise.$$state.status) {
          $scope.promise.then(function () {
            success(...);
          })
        }
        // If the promise is already resolved, handle your data
        else  {
          ...
          success(...);
         }
      }
};

If you do not want to define your controller inside of the html-template, you can use the resolve function of ui-router and inject the data inside of the controller:

.state('index', {
    url: "/",
    templateUrl: "some-template.html",
    controller: "testCtrl",
    resolve : {
       data  : function ( ) {
         var data;
         // resolve data from source, 
         return  data; 
       }
    }
});

app.controller('testCtrl', function (data) {
     $scope.data = data;
}]);