удалитьEventListener в контроллере - PullRequest
Новая
       12

удалитьEventListener в контроллере

0 голосов
/ 18 июня 2019

У меня в Angular-приложении используется angularJS v1.7 и angular-ui-router. В каждом контроллере у меня есть событие onkey, и у меня есть модальное меню в index.html. Моя проблема, когда модальное шоу мне нужно удалить событие onkey в контроллере и добавить мое событие onkey в модальное. В моем приложении очень много контроллеров.

index.html 

<body ng-app="app-demo">

    <a ui-sref="home">Go to HOME</a>

    <ui-view></ui-view>

    <div ng-controller="vt" style="position: fixed; right: 0; top: 0;">
        <div>Modal show: {{ vt }}</div>
    </div>


    <script>
        app.controller('vt', function($scope,$rootScope) {
            $scope.vt = false;

            function onKeyupVT() {
                $scope.vt = !$scope.vt;
                $scope.$apply();
            }

            document.addEventListener('keyup',onKeyupVT);
        });
    </script>
</body>

home.html 

<div ng-controller="app-home">
    <h1>Home</h1>
    <button ng-click="goToSubPage()">Click me to view sub list.</button>
</div>

<div ui-view="list-1"></div>
<div ui-view="list-2"></div>

список-1.html 

<div ng-controller="list-1">
    This is List - 1
</div>

homeController.js 

app.controller('app-home', function($scope,$state) {

    $scope.goToSubPage = function() {
        $state.go('list-1');
    }

    function onKeyup() {
        console.log('Home');
    }

    document.addEventListener('keyup',onKeyup);
});

app.controller('list-1', function($scope,$stateParams) {
    function onKeyup() {
        console.log('list-1');
    }
    document.addEventListener('keyup',onKeyup);
});

Что мне делать. Я очень новичок в angularJS.

1 Ответ

0 голосов
/ 18 июня 2019

Один из подходов заключается в создании службы для делегирования событий keyup: 

app.service("keyupDelegate", function() {
    this.target = new EventTarget();
    this.disableDispatch = false;

    document.addEventListener("keyup", keyupHandler);

    function keyupHandler(event) {
        if (!this.disableDispatch) {
            this.target.dispatchEvent(event);
        };
    }
});

Тогда каждый контроллер представления может использовать это в качестве цели:

Контроллер представления 

app.controller('app-home', function(keyupDelegate) {

    // ...    

    function onKeyup() {
        console.log('Home');
    }

    keyupDelegate.target.addEventListener('keyup',onKeyup);

    this.$onDestroy(function() {
        keyupDelegate.target.removeEventListener("keyup",onKeyup);
    });
});

Модальный контроллер может затем отключить диспетчеризацию, когда он активен:

Модальный контроллер 

app.controller("modal",function(keyupDelegate) {

    //...

    keyupDelegate.disableDispatch = true;

    this.$onDestroy(function() {
        keyupDelegate.disableDispatch = false;
    });
});
...