javascript - 在 Angularjs 中实现 JS Pulltorefresh 的问题

Question

我正在尝试使用此处的资源 https://ourcodeworld.com/articles/read/127/how-to-implement-a-pull-to-update-effect-android-refresh-style-with-javascript 将下拉刷新模块实现到我的 AngularJS 应用程序中

到目前为止，我已将代码粘贴到我的 Controller 中，例如 X。

PullToRefresh.init({
        mainElement: ('#page-refresher'),
        onRefresh: function(){
            $scope.tasks();
        },
        distThreshold : 50, // Minimum distance required to trigger the refresh.
        iconArrow: '<span class="la la-arrow-down"></span>', // The icon for both instructionsPullToRefresh and instructionsReleaseToRefresh
        instructionsPullToRefresh: "Pull Down to Refresh",
        instructionsReleaseToRefresh: "Release to Refresh"
    });

上面的代码获取tasks()。到这里为止没有问题。

此后，我将相同的代码粘贴到另一个 Controller (例如 Y)中。

PullToRefresh.init({
        mainElement: ('#page-refresher'),
        onRefresh: function(){
            $scope.history();
        },
        distThreshold : 50, // Minimum distance required to trigger the refresh.
        iconArrow: '<span class="la la-arrow-down"></span>', // The icon for both instructionsPullToRefresh and instructionsReleaseToRefresh
        instructionsPullToRefresh: "Pull Down to Refresh",
        instructionsReleaseToRefresh: "Release to Refresh"
    });

现在，每当我尝试拉取 Controller X 的页面时，pulltorefresh 函数就会工作，并且任务()会被获取。然后，如果我移动到另一个页面的 Controller Y并pulltorefresh，这里而不是history()来执行；前面的tasks()被执行。我知道这不是 AngularJS 中实现 JS 功能的方法。有人请指导在执行不同操作的多个 Controller 中实现拉动刷新模块的正确方法。

Answer 1

PullToRefresh 有一个 destroy可用于删除其实例的方法。

在每个 Controller 中，您可以init() PullToRefresh，然后使用 AngularJS $onDestroy() 生命周期事件destroy() 它。这应该可以防止在 Controller Y 中使用 PullToRefresh 的现有实例。

这有点hacky，可能有更好的方法，但请尝试一下，看看它是否有效。

Controller 代码:

function myController() {
    var self = this;

    var pullToRefreshInstance = PullToRefresh.init({...});

    self.$onDestroy = function() {
        pullToRefreshInstance.destroy();
    }
}