Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to use ui-scroll with ui-router? #91

Open
theks opened this issue May 29, 2016 · 3 comments
Open

How to use ui-scroll with ui-router? #91

theks opened this issue May 29, 2016 · 3 comments

Comments

@theks
Copy link

theks commented May 29, 2016

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

@theks
Copy link
Author

theks commented May 29, 2016

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

@dhilt
Copy link
Member

dhilt commented May 29, 2016

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: #83. If not, please specify your issue so we'll try to find out what happens.

@moosi
Copy link

moosi commented Jun 13, 2016

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;
}]);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants