Angular: слушатели событий постепенно увеличиваются между изменениями директив

Question

Angular: слушатели событий постепенно увеличиваются между изменениями директив

0

У меня есть угловое состояние, которое может вращаться между тремя шаблонами, каждый из которых управляется собственной директивой. В директивах есть прослушиватели событий, но когда я поворачиваюсь по директивам, слушатели событий складываются по одному, а после первого перехода к другой директиве все начинает становиться ошибкой. Я попытался исправить эти ошибки, но безрезультатно. Вот пример одной из трех директив:

angular.module('app').directive('presetStationOne', function($interval, $parse, $compile, PresetFactory){

    var linker = function(scope, element, attrs){

        PresetFactory.assign(1,6,scope);

        scope.$watch('page1', function(newVal, oldVal){
            if(newVal === true) {
                allEncompassing(document, PresetFactory, scope, "start");
            }
        });
        scope.$on('$destroy', function(){
            allEncompassing(document, PresetFactory, scope, "finish");
        });

    };

    return {
        restrict: 'EA',
        scope: false,
        link: linker,
        templateUrl: 'public/templates/freeplay/presetspage1.html'
    };  
});

И вот функция allEncompassing(), которая является всеми тремя директивами presetStation. Все они используют PresetFactory, и когда я перехожу от одной директивы к другой, вызовы PreetFactory постепенно увеличиваются.

function allEncompassing(document, PresetFactory, scope, msg){

    if (msg === "finish"){
        removeMyListeners();
    }   

    function clickListen(e){
        var f;
        if (!e.target.attributes.stationnumber){
            if (undefined){
                return;
            } else if(!e.target.parentNode || !e.target.parentNode.parentNode || !e.target){
                return;
            } else if (!e.target.parentNode.parentNode.attributes.hasOwnProperty('stationnumber')){
                return;
            } else {
                return f = e.target.parentNode.parentNode.attributes;
            }
        } else {
            return f = e.target.attributes;
        }
    }

    function resetMouseup(PresetFactory){
        restartMyListeners();
        PresetFactory.mouseUp();            
    }
    function execMouseup(e){
        resetMouseup(PresetFactory);
    }
    function execClickListen(e){
        var f = clickListen(e);
        if (f !== undefined){
            PresetFactory.mouseDown(f, scope);
            scope.$digest();
            restartMyListeners();
        } else {
            return;         
        }
    }

    function restartMyListeners(){
        restartMousedown();
        document.removeEventListener('mouseup', execMouseup);
        document.addEventListener('mouseup', execMouseup);
    }
    function restartMousedown(){
        document.removeEventListener('mousedown', execClickListen);         
        document.addEventListener('mousedown', execClickListen);
    }
    function removeMyListeners(){
        document.removeEventListener('mousedown', execClickListen);         
        document.removeEventListener('mouseup', execMouseup);
    }
    if (msg === "start"){
        restartMyListeners();
    }
}

Каков наилучший способ уменьшить увеличение этих прослушивателей событий и сохранить его в одном прослушивателе событий?

Les Paul 27 июль 2016, в 03:00

Источник

1

Самая очевидная вещь, о которой я могу подумать, - это добавить слушателей событий в свой шаблон, пусть их обрабатывает angular. Похоже, вы прикрепляете события кликов ко всей странице? Будет ли что-то вроде <body data-ng-click="execClickListen"> работать для вас?
Shan Robertson 27 июль 2016, в 00:32
0

Я дам этому попытку и доложу.
Les Paul 27 июль 2016, в 00:33
1

Я всегда иду на это, когда попадаю в вашу ситуацию, если только это не глобальный элемент за пределами видоизменения. Вы также можете попробовать создать контроллер «App» (или, я полагаю, директиву), который загружается только при начальной загрузке страницы и не изменяется при переключении маршрутов.
Shan Robertson 27 июль 2016, в 00:36
0

На самом деле, Шен, я только что понял, что это может не сработать, поскольку слушатели событий очень специфичны: если мышь удерживать нажатой менее одной секунды, «радиостанция радиостанции» изменяется. Если более секунды, «предварительная установка радиостанции» сохраняется. Поэтому я считаю, что какой-то слушатель событий необходим.
Les Paul 27 июль 2016, в 00:48
0

@ShanRobertson На самом деле, возможно, я нашел решение: stackoverflow.com/questions/25180332/…
Les Paul 27 июль 2016, в 01:10

Показать ещё 3 комментария

Теги:

javascript

angularjs

1 ответ

Ещё вопросы

Самая очевидная вещь, о которой я могу подумать, - это добавить слушателей событий в свой шаблон, пусть их обрабатывает angular. Похоже, вы прикрепляете события кликов ко всей странице? Будет ли что-то вроде <body data-ng-click="execClickListen"> работать для вас?
Я всегда иду на это, когда попадаю в вашу ситуацию, если только это не глобальный элемент за пределами видоизменения. Вы также можете попробовать создать контроллер «App» (или, я полагаю, директиву), который загружается только при начальной загрузке страницы и не изменяется при переключении маршрутов.
На самом деле, Шен, я только что понял, что это может не сработать, поскольку слушатели событий очень специфичны: если мышь удерживать нажатой менее одной секунды, «радиостанция радиостанции» изменяется. Если более секунды, «предварительная установка радиостанции» сохраняется. Поэтому я считаю, что какой-то слушатель событий необходим.
@ShanRobertson На самом деле, возможно, я нашел решение: stackoverflow.com/questions/25180332/…

Les Paul · Accepted Answer · 2016-07-26T23-24-00.000Z

Вот ответ, и это намного проще, чем использование прослушивателей событий. Я думал, что мне нужны слушатели событий, так как я наблюдал за событием в мухаузе, чтобы определить, должен ли я устанавливать радиостанцию или переходить на радиостанцию. Вместо этого я использовал атрибуты $interval и HTML-атрибуты data-ng-mousedown="radioStn(1)" data-ng-mouseup="checkResult()":

var dial = null;
var promise = null;
var time = 0;  
var check = false;

function defaultVal(){
    dial = null;
    promise = null;
    time = 0;
}    

function checkTime(dial, scope, $interval, $rootScope, PresetFactory){
    $interval.cancel(promise);
    if (check === true){
        console.log(dial + ' check is true');
        PresetFactory.setPreset(dial, scope);
    } else {
        console.log(dial + ' check is false');
        PresetFactory.changeStn(dial);
    }
    defaultVal();
}


angular.module('app').directive('presetStationOne', function($rootScope, $interval, $parse, $compile, PresetFactory){

    var linker = function(scope, element, attrs){

        PresetFactory.assign(1,6,scope);

        scope.radioStn = function(x){
            dial = x;
            promise = $interval(function(){
                time += 100;
                console.log(time);
                if (time >= 1000){
                    check = true;
                    checkTime(dial, scope, $interval, $rootScope, PresetFactory);
                    return;
                }
            }, 100);
        };

        scope.checkResult = function(){
            if (check === true){
                check = false;
                return;
            } else {
                checkTime(dial, scope, $interval, $rootScope, PresetFactory);
            }
        };

        scope.$on('$destroy', function(){
            defaultVal();
            check = false;
        });

    };

    return {
        restrict: 'EA',
        scope: false,
        link: linker,
        templateUrl: 'public/templates/freeplay/presetspage1.html'
    };  
});