Pregunta ¿Cuál es una forma correcta de enlazar eventos de clave a nivel de documento en AngularJS específicos solo para una determinada ruta / controlador?


Tengo una aplicación de una sola página que abre una galería. Quiero vincular evento de keyup de nivel de documento (para controles de galería de teclado) solo cuando la galería está abierta, es decir. cuando la ruta coincide

.when('/reference/:galleryId/:imageId/', { templateUrl: '/partials/gallery.htm', controller: 'galleryController', controllerAs: 'reference' })

y quiero desvincularlo cuando abandone esta ruta.

Una cosa que podría ser un problema es que bloqueo la recarga de la vista entre imágenes dentro de la misma galería con esto:

.run(['$route', '$rootScope', '$location', function ($route, $rootScope, $location) {
    var original = $location.path;
    $location.path = function (path, reload) {
        if (reload === false) {
            var lastRoute = $route.current;
            var un = $rootScope.$on('$locationChangeSuccess', function () {
                $route.current = lastRoute;
                un();
            });
        }
        return original.apply($location, [path]);
    };
}])

Demostración (haga clic en "Fotografie" para abrir la galería) http://tr.tomasreichmann.cz/

Angular wiz al rescate?

Gracias por tu tiempo y esfuerzo


5
2017-07-29 14:54


origen


Respuestas:


Puede vincular un evento de teclado a $document en el constructor de su controlador y luego desvincular el evento cuando el controlador $scope Esta destruido. Por ejemplo:

.controller('galleryController', function ($scope, $document) {
  var galleryCtrl = this;

  function keyupHandler(keyEvent) {
    console.log('keyup', keyEvent);
    galleryCtrl.keyUp(keyEvent);

    $scope.$apply(); // remove this line if not need
  }

  $document.on('keyup', keyupHandler);
  $scope.$on('$destroy', function () {
    $document.off('keyup', keyupHandler);
  });

  ...
});

No quedará nada cuando la vista se vuelva inactiva.

Si cree que no es correcto hacer esto en el controlador, puede moverlo a una directiva personalizada y colocarlo en una plantilla de la vista.


6
2017-07-30 12:47



Finalmente me quedé con

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:og="http://ogp.me/ns#"
  xmlns:fb="http://www.facebook.com/2008/fbml"
  lang="cz"
  ng-app="profileApp"
  ng-keyup="$broadcast('my:keyup', $event)" >

No estoy seguro si esto es una buena práctica, pero se registra dentro de mi controlador

$scope.$on('my:keyup', function(event, keyEvent) {
    console.log('keyup', keyEvent);
    galleryCtrl.keyUp(keyEvent);
});

Y no hace nada cuando la ruta actual no está activa.

Encontré esta respuesta aquí: https://groups.google.com/forum/#!searchin/angular/document$ 20level $ 20events / angular / vXqVOKcwA7M / RK29o3oT9GAJ

Hay otra forma de vincularlo globalmente, que no era mi objetivo, el código original en cuestión hizo lo que necesitaba.


1
2017-07-30 12:16