Ionic scroll-delegate 的动态值

Question

我的情况是做了一个ion-view，被5个页面使用了。这些页面是通过 "tab like" 菜单导航的，该菜单不使用 ion-tabs 或类似的东西（不是真正的问题所在）。我现在想为 Ionics scroll-delegate 使用动态值，但它似乎不起作用。我读过关于同一主题的其他问题（在 SO 和 Ionic 论坛上），但它们是 Ionic 1.0.0 左右时代的老话题，所提供的解决方案到今天还不起作用。

我的ion-view模板：

<ion-view>
  <ion-content delegate-handle="{{category.id}}" on-scroll="scrollEvent(category.id)">
    <h1>{{category.title}}</h1>
  </ion-content>
</ion-view>

我的控制器scrollEvent功能：

$scope.scrollEvent = function(category) {
  var scrollamount = $ionicScrollDelegate.$getByHandle(category).getScrollPosition().top;
  if (scrollamount > 180) {
    console.log('scroll amount > 180');
  } else {
    console.log('scroll amount < 180');
  }
};

这会在控制台中发出以下警告：

Delegate for handle "12345" could not find a corresponding element with delegate-handle="12345"! getScrollPosition() was not called! Possible cause: If you are calling getScrollPosition() immediately, and your element with delegate-handle="12345" is a child of your controller, then your element may not be compiled yet. Put a $timeout around your call to getScrollPosition() and try again.

我试过在 $ionicView.enter $ionicView.afterEnter 和 $ionicView.loaded 上给出 delegate-handle 值。我已经给函数设置了 10 秒等的超时时间，但没有用。

如果我手动设置 delegate-handle 并运行它，它就可以工作。我需要动态设置它，因为不同的视图应该有自己的 delegate-handle 以便我能够将它们彼此分开并相应地设置滚动位置等。类别的 ID 也可能会改变。

Ionic 在浏览页面时制作这些 "panes"（缓存它们）以便我可以查看并检查句柄是否正确。

<ion-view nav-view="active" style="opacity: 0.9; transform: translate3d(-33%, 0px, 0px);">
  <ion-content delegate-handle="12345" on-scroll="scrollEvent(category.id)">
    <h1>Category 12345 title</h1>
  </ion-content>
</ion-view>

我不想去修改 Ionics 代码本身。

我已经制作了一个简单的演示，其中包含类似的功能供您试用，重复了问题：http://codepen.io/thepio/pen/xORdNG

有人可能会说，显然我是从 http 请求中获取有关我的真实应用程序的数据（类别等）。

Answer 1

ionic 的 delegate-handle 指令的问题在于它实际上将字符串作为输入。因此，当您编写 {{myModel}} 时，它不会将其与模型的值进行插值，而是将“{{myModel}}”作为委托句柄标识符。所以如果我们不想在等待 ionic 的团队解决这个问题的同时改变 ionic 的核心，这是我对这个问题的解决方案：

将 id 放在 ion-content 标记上，方法与分配委托句柄的方式相同。 IE。 <ion-content id="{{category.id}}"></ion-content>

然后获取当前视图的处理程序的实际实例并使用它，这样它总是准确的（因为我们使用 id 属性作为标识符使用下面的代码：

    //the idea is to get the specific instance of the handle element using ids, that's what we do in the function below in our controller.
   $scope.getScrollPositionEpicly = function (category) {
        var instances = $ionicScrollDelegate["_instances"];
        //get all the instances that ionic scroll delegate is handling 
        var instance = null;
        for(var index in instances){
          if(instances[index].$element[0].id === category){ //match the instance that we're targeting using the id that we provided , i.e. the current view/handle/id on ion-content
            instance = instances[index];
          }
        }
        if(instance && instance.getScrollPosition){
          return instance.getScrollPosition(); //return the correct position
          console.log(JSON.stringify(instance.getScrollPosition()));
        }
        return {top:0,left:0}; //fallback case/default value so execution doesn't break
   }
  $scope.scrollEvent = function(category) {
    // var scrollamount = $ionicScrollDelegate.$getByHandle(category).getScrollPosition().top;
    var scrollPosition = $scope.getScrollPositionEpicly(category);
    var scrollAmount = (scrollPosition.top || 0);
    console.log("category : " + category);
    console.log("scrollPosition : " + JSON.stringify(scrollPosition));
    if (scrollAmount > 10) {
      console.log('scroll amount > 10');
    } else {
      console.log('scroll amount < 10');
    }
  };

DEMO: 这是代码的 working demo（检查控制台的输出）

希望这对您有所帮助。

Ionic scroll-delegate 的动态值

Dynamic value with Ionic scroll-delegate

javascript

angularjs

ionic-framework

ionic-view