Error in datasource provider with ui-scroll 1.7.0 and AngularJS 1.4

[MiguelAngel82]

Hi all,

I have an issue trying to implement a basic example of ui-scroll directive in a project using AngularJS 1.4, ui-scroll 1.7.0 and Coffeescript.

I'm trying to implement the basic example with datasource on scope.

In the view I've put his:

<div class="viewport" id="viewport-scopeDatasource" ui-scroll-viewport>
    <div class="item" ui-scroll="item in ctrl.datasource">{{item}}</div>
</div>

And the controller has this (the variable ctrl is injected in the view and has value and its accesible):

class TestController 
  constructor: (@$scope) ->
    @datasource = get: (index, count, callback) ->
        i = undefined
        items = []
        item = undefined
        min = 1
        max = 100
        i = index
        while i < index + count
          if i < min or i > max
            i++
            continue
          item =
            description: 'Item : ' + i
            imageURL: 'http://placehold.it/96x96&text=' + i
          items.push item
          i++
       callback items
        return

But an error is thrown. This is the error: Unknown provider: ctrl.datasourceProvider <- ctrl.datasource

I've tried to create datasource variable in the controller adding it to @scope and using it in the viw without ctrl., but I've got the same error.

Could anybody help me with this?

Thanks a lot!

Regards, Miguel.

[dhilt]

@MiguelAngel82 It looks like a pretty common issue with AngularJS dependencies injection, they have an official doc on it: Unknown Provider. This issue occurs when the ui-scroll can't find datasource in the scopes chain and trying to inject it as AngularJS service/factory and there is no datasource service. So, if you want to set up datasource on the controller's scope, there should be an assignment like:

   $scope.datasource = datasource;

Not sure, how it exactly should be in your particular case, but

• the datasource object has to be a property of TestController's scope
• TestController must be attached to the view via ng-controller="testController as ctrl"

[MiguelAngel82]

Hi @dhilt.

Thank you very much for your answer. I really appreciate it ;)

Finally, I fix the problem using a factory. So I create a factory like that, taking into account that this project use Coffeescript and RequireJS:

  name: 'datasource'
  type: 'factory'
  class: [ '$log', '$timeout'

    (console, $timeout)->

      get = (index, count, success)->
        result = []
        start = Math.max(0, index)
        end = index + count - 1
        if start <= end
          if(index > 0)
            i = start
            while i <= end
              result.push 'item #' + i
              i++
        success result

      {get}
  ]

:information_source: Logic content of get is different, but it's not important for this context.

Therefore, in the view, using ui-scroll="item in datasource" works :).

By the way, I take advantage on this thread to know what is the best way to populate results via REST API call. If you don't mind, please, could you tell me or put a link to an example to tackle it?

Thank you very much.

Regards, Miguel.

[dhilt]

@MiguelAngel82 A full functional REST API sample requires working server, but we have some demos that emulate remote calls:

• remote demo sources
• adapter sync demo runtime

The idea is the same

    datasource.get = function(index, count, success) {
        Server.request(index, count).then(function(result) {
            success(result);
        });
    };

Just make an API call (for example GET /api/myData?offset=${index}&count=${count}) and provide success callback execution when the result is passed to the Client.

[MiguelAngel82]

Oh, thank you @dhilt. It works perfectly ;)

I'm having another issue. Following the implementation you suggested, I can see a blank space when you do a scroll down and scroll up again, like this:

https://imgur.com/a/PQt9q

And even more, first time table is loaded, the focus is not in the top. Could be possible to fix blank space and doing first time focus fixed in the top?

Thanks again.

P.S.: If is needed, I could open another thread.

[dhilt]

@MiguelAngel82 Commonly, the white-space issue relates to the datasource implementation. I would ask you to start a new thread and provide a demo. You may take this Plunker and update it with your infrastructure. Anyway, we need a repro to be able to help you with your latest request.

[MiguelAngel82]

Hi @dhilt.

Thanks for your response and help. Finally, I've solved the problem with the solution provided here, in the second comment.

So once again, thank you ;)

Regards, Miguel.