Question

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

到目前为止，我已将代码粘贴到控制器中，例如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"
    });

以上代码获取task（）。直到这里都没有问题。

此后，我将相同的代码粘贴到另一个控制器中，例如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"
    });

现在，每当我尝试拉出控制器X的页面时，pulltorefresh函数都会起作用，并会提取task（）。然后，如果我移到另一页的控制器Y并pulltorefresh，则在这里执行，而不是执行history（）；之前的task（）被执行。我知道这不是在AngularJS中实现JS函数的方法。有人会指导在执行不同操作的多个控制器中实施“刷新刷新”模块的正确方法。

Answer 1

PullToRefresh具有destroy方法，可用于删除其实例。

在每个控制器中，您可以init() PullToRefresh，然后使用AngularJS destroy()生命周期事件$onDestroy()对其进行控制。这样可以避免在控制器Y中使用现有的PullToRefresh实例。

有点黑，也许有更好的方法，但是尝试一下，看看是否可行。

控制器代码：

function myController() {
    var self = this;

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

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

Answer 2

使用@nevada_scout的使用destroy（）方法的答案，我尝试自己解决了这个问题，幸运的是它起作用了。

if($rootScope.pullToRefreshInstance != undefined) {
    $rootScope.pullToRefreshInstance.destroy();
    $rootScope.pullToRefreshInstance = undefined;
}

$rootScope.pullToRefreshInstance = PullToRefresh.init({
    mainElement: ('#page-refresher'),
    onRefresh: function(){
        //Perform your on refresh action here
    },
    distThreshold : 50,
    setPassiveMode: true,
    iconArrow: '<span class="la la-arrow-down"></span>',
    instructionsPullToRefresh: "Pull Down to Refresh",
    instructionsReleaseToRefresh: "Release to Refresh"
});

将init分配给rootscope可以完成这项工作（也可以用作服务）。然后，在控制器之间移动时，代码的前3行将检查是否存在任何先前启动的ptr。如果存在，它将销毁它并创建一个专门针对当前控制器的新文件。

在Angularjs中实现JS Pulltorefresh的问题

2 个答案: