Adapter & Components

[david-hollifield]

Like a few others, I'm having trouble getting my adapter to work. I've been successfully using an older version of ui-scroll (pre-adapter) for a long time now, but wanted to update to the latest version (1.6) to fix some jankiness in the older version. The latest version works much better and I'mreally excited to see how much it has improved. My app is mostly made up of nested angularjs 1.5+ components which, as you know, default to controllerAs: $ctrl. I've tried several iterations, but haven't been able to get the adapter to contain the methods/properties necessary to reload the list. Debugging through ui-scroll's createValueInjector() method, I see it never finds a scope to use. I've tried with $compileProvider.debugInfoEnabled(true); and $compileProvider.debugInfoEnabled(false);

Here's some things I've tried:

<div>
  <div ui-scroll-viewport>
    <ul>
      <li ui-scroll="item in myDataSource" adapter="myAdapter">
        {{item.Name}}
      </li>
    </ul>
  </div>
</div>

<div>
  <div ui-scroll-viewport>
    <ul>
      <li ui-scroll="item in myDataSource" adapter="myAdapter on $ctrl">
        {{item.Name}}
      </li>
    </ul>
  </div>
</div>

<div>
  <div ui-scroll-viewport>
    <ul>
      <li ui-scroll="item in myDataSource" adapter="$ctrl.myAdapter">
        {{item.Name}}
      </li>
    </ul>
  </div>
</div>

angular
    .module("app.components")
    .component("myComponent",
    {
        bindings: {
        },
        controller: function() {
            var $ctrl = this;
            $ctrl.$onInit = function () {
                $rootScope/$scope/$ctrl.myAdapter = {};
                $scope.myDataSource = {
                     get: function () {
                     }
                };
            };
        },
        templateUrl: "myComponent.html"
    });

Nothing seems to work. I can't seem to find myAdapter in $rootScope/$scope/$ctrl. It's always just {}. What am I missing? It's pretty important for me since it's the only way now to refresh the list.

[dhilt]

@david-hollifield Please try the component demo. A click on any row rendered in a viewport forces the Adapter.applyUpdates call through the controller update-method. Does this example work for you?

[david-hollifield]

@dhilt I tried that demo and nothing shows up. I'm running the latest version of Chrome so that surprised me, but it's probably just an ES6 issue. I looked at the demo source and thought it was because I was using the default $ctrl vs ctrl. I tried changing to ctrl in my component, but that made no difference unfortunately. Debugging through createValueInjector, I see that it traverses up my entire tree hierarchy to the root without finding anything to inject into.

[david-hollifield]

@dhilt After stepping through createValueInjector for the adapter attribute, I noticed that this line

var candidateScope = candidate.scope();

never finds a scope during the entire element parent traversal. Any ideas why that would happen?

[david-hollifield]

@dhilt Ok. So if I set $compileProvider.debugInfoEnabled(true); scope can now be found and the adapter shows up in my component controller. Since it appears that debug info must be enabled for element.scope() to work, why not just inject the adapter object directly into the datasource? Seems like a convenient place that's always available without requiring all of the DOM scope traversal and we can then disable debug info.

[dhilt]

@david-hollifield Yes, we have #132 issue... And we are working on it right now!

[dhilt]

@david-hollifield May I ask you to look at adapter-assignments branch and to try new ui-scroll distributive in your project? Use standard Controller As syntax to bind the adapter with your component's controller. I believe it should cover your needs, and it would be very helpful if you would give a feedback!

[david-hollifield]

@dhilt I just tried the latest version with debugInfoEnabled(false) and it works great. Good job! Thanks for the quick fix.

[dhilt]

@david-hollifield Thanks a lot! It will be released pretty soon as 1.6.1 version.