javascript - Ionic scroll-delegate 的动态值

Question

我的情况是，我制作了一个被五个页面使用的ion-view。这些页面是通过“标签式”菜单导航的，该菜单不使用 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>

我的 Controller 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 上赋予 delegate-handle 值。已加载。我已经为函数设置了 10 秒等的超时时间，但这并没有帮助。

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

Ionic 在浏览页面时制作这些“ Pane ”(缓存它们)，以便我可以查看并检查句柄是否正确。

<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

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

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

然后获取当前 View 处理程序的实际实例并使用它，这样它总是准确的(因为我们使用 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');
    }
  };

演示:这是working demo代码(检查控制台的输出)

希望这对您有所帮助。