Проблема при внедрении JS Pulltorefresh в Angularjs

Question

Я пытаюсь внедрить модуль 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"
    });

Приведенный выше код выбирает задачи (). Никаких проблем до здесь.

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

Answer 1

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

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

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

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

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 для корневого раздела выполнило свою работу (Можно также использовать как службу).Затем при перемещении между контроллерами первые 3 строки кода проверят, существует ли какой-либо предыдущий инициированный ptr.Если он существует, он уничтожит его и создаст новый, специфичный для текущего контроллера.