Блог

Я пытаюсь внедрить модуль pull to refresh в мое приложение AngularJS, используя ресурс отсюда https://ourcodeworld.com/articles/read/127/how-to-implement-a-pull-to-update-effect-android-refresh-style-with-javascript

На данный момент я вставил код в свой контроллер, скажем, 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() . Никаких проблем до сих пор.

После этого я вставил тот же код в другой контроллер, скажем 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 работает, и извлекается tasks() . Затем, если я перейду к контроллеру Y другой страницы и выполню pulltorefresh, здесь вместо history() для выполнения; выполняются предыдущие задачи(). Я знаю, что это не способ реализации функций JS в AngularJS. Кто-нибудь, пожалуйста, укажите правильный способ реализации модуля pull to refresh на нескольких контроллерах, выполняющих разные действия.

У PullToRefresh есть метод destroy, который можно использовать для удаления его экземпляра.

В каждом контроллере вы можете init() выполнить PullToRefresh, а затем destroy() использовать $onDestroy() событие жизненного цикла AngularJS. Это должно предотвратить использование существующего экземпляра PullToRefresh в контроллере Y.

Это немного халтурно, и может быть лучший способ, но попробуйте и посмотрите, работает ли он.

Код контроллера:

 function myController() {
    var self = this;

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

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

Используя ответ @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"
});
  

Назначение инициализации rootscope выполнило свою работу (также может использоваться как сервис).
Затем при перемещении между контроллерами первые 3 строки кода будут проверять, существует ли какой-либо предыдущий инициированный ptr. Если он существует, он уничтожит его и создаст новый, специфичный для текущего контроллера.