Javascript 带有离子滚动委托的动态值

我的情况是，我制作了一个有五页使用的

ion视图。这些页面通过一个“tab-like”菜单进行导航，该菜单不使用
ion-tabs
或任何类似的功能（这不是问题的关键）。我现在想为Ionics
滚动委托使用动态值，但它似乎不起作用。我读过其他关于同一主题的问题（在SO和Ionic论坛上），但这些问题都是Ionic 1.0.0左右时代的老话题，提供的解决方案到今天为止都不起作用

我的
ion视图
模板：

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

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

句柄“12345”的委托找不到具有委托句柄=“12345”的对应元素！未调用getScrollPosition（）！
可能原因：如果您正在立即调用getScrollPosition（），并且委托句柄为“12345”的元素是控制器的子元素，那么您的元素可能尚未编译。在对getScrollPosition（）的调用周围放置$timeout，然后重试

我已尝试在
$ionicView.enter
$ionicView.afterEnter
和
$ionicView.loaded
上指定
委托句柄
值。我给了函数10秒的超时时间等，但它没有帮助

如果我手动设置
委托句柄
并运行它，它就会工作。我需要动态地设置它，因为不同的视图应该有自己的
委托句柄
，以便我能够将它们彼此分开并相应地设置滚动位置等。此外，类别的id可能会更改

Ionic在浏览页面时会创建这些“窗格”（缓存它们），这样我就可以查看并检查句柄是否正确

<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>


12345类标题

我不想去改变Ionics代码本身

我制作了一个简单的演示，其中包含类似的函数供您使用，这些函数可以解决问题：

有人可能会说，很明显，我是从http请求获取实际应用程序上的数据（类别等）。
爱奥尼亚的
委托句柄
指令的问题是，它实际上接受字符串作为输入。因此，当您编写{{myModel}}时，它不会使用模型的值对其进行插值，而是将“{myModel}}”作为委托句柄标识符。因此，如果我们不想在等待爱奥尼亚的团队解决此问题的同时改变爱奥尼亚的内核上的任何内容，下面是我对此问题的解决方案：

将ID放在
离子内容
标记上的方式与分配代理句柄的方式相同。即

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

//思想是使用id获取handle元素的特定实例，这就是我们在控制器下面的函数中所做的。
$scope.getScrollPositionEpicly=函数（类别）{
var实例=$ionicScrollDelegate[“_实例”]；
//获取ionic scroll委托正在处理的所有实例
var实例=null；
for（实例中的var索引）{
如果（instances[index].$element[0].id==category）{//使用我们提供的id（即ion内容上的当前视图/句柄/id）匹配我们要定位的实例
实例=实例[索引]；
}
}
if（instance&&instance.getScrollPosition）{
return instance.getScrollPosition（）；//返回正确的位置
log（JSON.stringify（instance.getScrollPosition（））；
}
返回{top:0，left:0}；//回退案例/默认值，以便执行不会中断
}
$scope.scrollEvent=函数（类别）{
//var scrollamount=$ionicScrollDelegate.$getByHandle（类别）.getScrollPosition（）.top；
var scrollPosition=$scope.getScrollPositionEpicly（类别）；
变量scrollAmount=（scrollPosition.top | | 0）；
控制台日志（“类别：+类别）；
log（“scrollPosition:+JSON.stringify（scrollPosition））；
如果（滚动量>10）{
console.log（'scroll amount>10'）；
}否则{
console.log（'滚动量<10'）；
}
};

演示：下面是代码的详细说明（检查控制台的输出）

希望这能有所帮助。
Awesome@AhsanAyaz！这非常有效。谢谢！
    //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');
    }
  };