4

Estoy tratando de hacer programáticamente que al entrar a cierta vista con cierta URL un método no sea llamado o sea ignorado por el ciclo de ejecución digest. Esto es porque quiero evitar que el modal de carga (utilizo SweetAlert para ello) aparezca cada vez que quiero agregar o editar un registro de mi tabla. Se supone que ese modal de carga sólo debe funcionar cuando entro a la vista donde se encuentra la tabla. Este es mi código:

(function () {
  'use strict';
  angular.module('mytodoApp').controller('colegioCtrl', colegioCtrl);
  colegioCtrl.$inject = ['$scope', '$timeout', 'colegioEntityServices','Upload', '$location', 'growl', 'ValidationService', 'localStorageService', 'utilServices', 'appConstant'];
  //Resto de código

  gestionColegio.ejecutarConsultarColegios = function () {
        appConstant.MSG_LOADING("Cargando datos, espere un momento...");
        appConstant.CARGANDO();
        colegioEntityServices.buscarColegio().then(function (data) {
            var colegio = {};
            gestionColegio.colegios = [];
            angular.forEach(data, function (value, key) {
                colegio = {
                    id: value.id,
                    codigoInstitucionAcademica: value.codigoInstitucionAcademica,
                    nombreInstitucionAcademica: value.nombreInstitucionAcademica,
                    idPais: value.idPais,
                    idDepartamento: value.idDepartamento,
                    idMunicipio: value.idMunicipio,
                    nombrePais: value.nombrePais,
                    nombreDepartamento: value.nombreDepartamento,
                    nombreMunicipio: value.nombreMunicipio,
                    sectorAcademicoLV: value.sectorAcademicoLV,
                    estadoLV: value.estadoLV,
                    caracterAcademicoLV: value.caracterAcademicoLV,
                    nombreSector: value.nombreSector,
                    nombreEstado: value.nombreEstado,
                    nombreCaracterAcademico: value.nombreCaracterAcademico,
                    colegioOtro: value.codigoInstitucionAcademica === "000000000000"
                };
                gestionColegio.colegios.push(colegio);
            });
            appConstant.CERRAR_SWAL();
        }).catch(function (e) {
            return;
        });

    };

    function init() {
        $scope.$on('$locationChangeStart', cambioVista);
    }

    function cambioVista(event, url) {
        url = url.substr(url.indexOf("#"), url.length);
        if (url !== "#/institucion") {
            cancelarSwal();
        }
    }

    function cancelarSwal() {
        $scope.$$postDigest(function () {
            appConstant.CERRAR_SWAL();
        })
    }
    gestionColegio.ejecutarConsultarColegios();
    init();
  }
})();

Actualmente esta es una solución no muy elegante, ya que el modal se muestra casi que en mmilisegundos y se ve feo. Puedes darte cuenta que estoy usando $locationChangeStart para detectar cuando hay cambio de URL. Cuando sucede y compruebo que esa URL es distinta a #/institucion, entonces llamo a un método que ejecuta el $$postDigesty así cierro el modal. Sin embargo, en vez de esto, quiero decirle que el método que carga la tabla no se ejecute cuando esa validación ocurra.

¿Existe alguna manera?

8
  • Podrias ejecutar el codigo para ver que esta pasando]? el 5 oct. 2016 a las 20:03
  • @DanielHernández, no entiendo tu petición. el 5 oct. 2016 a las 22:53
  • subir tu codigo completa para poder correrlo el 6 oct. 2016 a las 0:39
  • Si entendí bien tu código usas el mismo controller para todas las vistas? Porque mejor no usas un controller diferente por vista? Eso debería resolver tu problema.
    – devconcept
    el 6 oct. 2016 a las 15:58
  • @devconcept Esta es una sola vista y es un solo controller. No he puesto más vistas. el 7 oct. 2016 a las 2:07

3 respuestas 3

7

Me la juego, primero varias hipótesis:

  • Tu controlador ejecuta init al instanciarse, y éste escucha el evento $locationChangeStart, ese es principalmente tu problema de que al cambiar de ruta se ejecute la función cambioVista. Con esta hipótesis, yo quitaría el $scope.$on('$locationChangeStart', cambioVista); de la función init, y ejecutaría cambioVista, con eso consigues que se ejecute sólo cuando el controlador se instancia, si estás con rutas y con ngview esa es la filosofía de AngularJS que debes seguir.

  • Por otro lado, si por narices tienes que tener ese $on ya que tu controlador es instanciado y no se destruye nunca, me plantearía crear mis custom events usando $scope.$emit para llamarlos o $scope.$broadcast depende de la situación de scopes.

Piensa en la primera hipótesis, escribe comentario si quieres y voy actualizando la respuesta si no es satisfactoria.

Aclaración sobre lo que es digest. El ciclo de digest no ejecuta los métodos de tu controlador, como dices, sabes lo que es el two-data-binding? AngularJS mediante los $scopes, se encarga de que tu aplicación se comunique M/V->C y al revés, es decir, tú solo te ocupas de tener tus variables de $scope con los valores que quieres, y él ya se encarga de hacer su "magia" y actualizar tus templates, esta magia es debida al ciclo de digest, por ejemplo, si añades un watcher ($scope.$watch) ahí estás añadiendo contenido al ciclo de digest. AngularJS hace un manage sobre todo lo que esté en $scope con lo cual no tienes que preocuparte. Digest no va cogiendo todos los métodos de los componentes de AngularJS y los va ejecutando ahí por que sí. Tu problema no está en el digest, tu problema es sobre la instancia del controlador.

Dicho esto, te aconsejo que veas tu mismo como AngularJS instancia tus controladores, haz una cosa, añade esta línea sobre tu código:

console.log('Instanciando controlador');
gestionColegio.ejecutarConsultarColegios();
init();

Ahora entra, cambia de ruta, etc y mira cuantas veces se ejecuta, para ver cuando es destruido podrías añadir también:

console.log('Instanciando controlador');
gestionColegio.ejecutarConsultarColegios();
scope.$on('$destroy', function() {
        console.log('Destruyendo controlador');
});
init();

Ese $on hace que cuando se ejecute el evento $destroy (interno de angular que lanza cuando destruye un componente) se ejecute tu callback. Esto te podrá dar pistas de cómo funciona Angular en este sentido. Échale un vistazo y comentamos.

3
  • Creo que tu primera hipótesis está un poco alejada de mis conocimientos, a ver si resumo un poco. 1. Hasta donde tengo entendido, independientemente de todo, todos métodos del controlador se van a ejecutar cada vez que cambio de vista con el simple hecho de tener en el ng-app. Quiere decir, que el ciclo digest de angular siempre va a ejecutar todos los métodos. En ese caso, no entiendo la relación de tu teoría con lo que quiero hacer. 2. Esto tiene un poco más de sentido, sin embargo, creo que no cumple de momento el hecho de poder omitir el llamado de un método desde el controlador. el 11 oct. 2016 a las 20:11
  • Eso que comentas no es correcto, "todos los métodos del controlador se van a ejecutar cada vez que cambio de vista", para nada, el controlador se ejecuta (instancia) cuando es invocado, en tu caso, usando rutas, cuando cambies de ruta. Puedes ver los componentes de angular como si fuese un patrón modulo. Voy a hacerte una aclaración de lo que es digest en la respuesta de la pregunta
    – Kalamarico
    el 11 oct. 2016 a las 22:21
  • He actualizado la respuesta, échale un ojo, de todas formas si consigues hacer un jsfiddle con tu código funcionando, te lo modifico para solucionar tu problema
    – Kalamarico
    el 11 oct. 2016 a las 22:32
4
+100

Veamos primero a que llamas método de un controlador. Usualmente debería ser algo así

.controller('MyCtrl', function() {
    var vm = this;

    // (notación tradicional)
    $scope.metodo = funtion() {
        // código
    };

    // (notación controllerAs)
    vm.metodo = function() {
        // código
    }

    // (una función común y corriente)
    // o var metodo = function.... (no recomendado)
    function metodo() {
        // código
    }
});

Nada de lo anterior se ejecuta a menos que hagas

$scope.metodo();
vm.metodo();
metodo();

Las tres variantes tienen el mismo efecto excepto que en el último caso la función no es unida al $scope de ninguna forma, en las otras dos si es posible invocarlas desde algún evento o directiva en la vista.

.controller('MyCtrl', function() {
    function metodo() {
        // código
    }
});

<button ng-click="metodo()"></button>
<!-- No funciona -->

Usualmente este tipo de método es usado para rutinas de inicialización de los controllers.

Lee https://github.com/johnpapa/angular-styleguide/tree/master/a1#style-y080

Las tres variantes son simples funciones (dos de ellas almacenadas como propiedades en un objeto) y recuerda que AngularJS es básicamente JavaScript así que no va a ejecutar código que no le hayas instruido tu mismo que ejecute. Si en tu controller hay dos llamadas

gestionColegio.ejecutarConsultarColegios();
init();

Esas son dos funciones JavaScript comunes y corrientes (3ra variante) que se ejecutarán en el momento que se instancie el controller. La primera es la que te abre la ventana modal que no quieres que se ejecute, por lo tanto la solución es tan sencilla como una de las siguientes posibilidades:

  1. No llamar a esa función
  2. Cambiar su lógica para que no te muestre la ventana modal dependiendo de alguna condición.

Creo que intentar manipular el ciclo digest es una mala idea que te puede traer inesperadas consecuencias ya que puedes encontrar soluciones alternativas a tu problema sin tener que manipular código a tan bajo nivel.

Esta es una regla de un linter de AngularJS que explícitamente desaprueba el uso de propiedades del $scope privadas(todas las que comienzan con $$). Usualmente esto se considera una mala práctica.

Todas las propiedades del scope que comiencen con $$ son usadas internamente por AngularJS. No deberías usarlas directamente.

Ahora a la solución del problema

Esto es lo que puedo divisar a primera vista

function init() {
    $scope.$on('$locationChangeStart', cambioVista);
}

Esta función la mandas a ejecutar. Esto es lo que esta pasando realmente cuando la invocas.

  • Usuario navega en tu aplicación
  • Se desencadena el evento $locationChangeStart
  • Se instancia tu controller
  • Bindeas el código anterior al evento(dentro de tu controller) para que se ejecute a partir de ahí
  • Usuario vuelve a navegar
  • Entonces es que se ejecuta el código de tu evento

Chequea el snippet para que veas el problema en acción

angular.module('app', ['ngRoute'])
  .controller('EventCtrl', function($scope) {
    console.log('Controller instanciado');

    $scope.$on('$locationChangeStart', function() {
      console.log('Evento bindeado en controller');
    });
  })
  .config(function($routeProvider) {
    $routeProvider
      .when('/', {
        template: '<h1>Controller1</h1><h2>Presione navegar</h2><a href="#/url2">Navegar</a>',
        controller: 'EventCtrl'
      })
      .when('/url2', {
        template: '<h1>Controller2</h1>'
      })
      .otherwise({
        redirectTo: '/'
      });
  })

.run(function($rootScope) {
  $rootScope.$on('$locationChangeStart', function() {
    console.log('Navegación de usuario');
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-route.min.js"></script>
<div ng-app="app">
  <div ng-view></div>
</div>

Evidentemente eso no es lo que quieres, por eso casi siempre los eventos de ngRoute se escriben en bloques run, no dentro del mismo controller, para que estos eventos ya estén disponibles antes de la instanciación.

El orden correcto sería

  • Bindeas el código anterior al evento en un bloque run
  • Usuario navega en tu aplicación
  • Se desencadena el evento $locationChangeStart
  • Se ejecuta el código de tu evento
  • Se instancia tu controller

angular.module('app', ['ngRoute'])
  .controller('EventCtrl', function($scope) {
    console.log('Controller instanciado');
  })
  .config(function($routeProvider) {
    $routeProvider
      .when('/', {
        template: '<h1>Controller1</h1><h2>Presione navegar</h2><a href="#/url2">Navegar</a>',
        controller: 'EventCtrl'
      })
      .when('/url2', {
        template: '<h1>Controller2</h1>'
      })
      .otherwise({
        redirectTo: '/'
      });
  })

.run(function($rootScope) {
  console.log('Evento bindeado');
  $rootScope.$on('$locationChangeStart', function() {
    console.log('Navegación de usuario');
    console.log('Evento desencadenado');
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-route.min.js"></script>
<div ng-app="app">
  <div ng-view></div>
</div>

Hay algo más y es que recurres a usar dicho evento para obtener la url de tu aplicación cuando puedes usar $location.path() para obtener la misma información, así que una solución podría ser la siguiente

angular.module('app', ['ngRoute'])
  .controller('EventCtrl', function($location, colegios, $scope) {
    console.log('Controller instanciado');

    $scope.ruta = $location.path();

    colegios.cargarDatos($location.path() === '/institucion');
  })
  .factory('colegios', function() {
    return {
      cargarDatos: function(mostrarModal) {
        if (mostrarModal) {
          alert('Ventana modal');
        }
        // Resto del codigo
      }
    };
  })
  .config(function($routeProvider) {
    $routeProvider
      .when('/', {
        template: '<h1>Controller1</h1><br><h2>Ruta {{ruta}}</h2><br><a href="#/institucion">Navegar</a>',
        controller: 'EventCtrl'
      })
      .when('/institucion', {
        template: '<h1>Controller2</h1><br><h2>Ruta {{ruta}}</h2>',
        controller: 'EventCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-route.min.js"></script>
<div ng-app="app">
  <div ng-view></div>
</div>

Si te fijas tengo dos rutas con el mismo controller y el alert solo sale en una de ellas. No tuve que intentar usar el ciclo digest ni eventos para lograrlo, solo le pasé al Factory que carga los datos una variable true o false que le indica si debe mostrar el modal o no y la condición para esto es que $location.path() === '/institucion', o sea que el path de la url de tu aplicación sea /institucion.

Sin embargo, en vez de esto, quiero decirle que el método que carga la tabla no se ejecute cuando esa validación ocurra.

En tu ejemplo particular sería

if ($location.path() === '/institucion') {
    appConstant.MSG_LOADING("Cargando datos, espere un momento...");
    appConstant.CARGANDO();
}
3
  • He aprendido algo nuevo hoy. Muchas gracias amigo, muy bien explicado. el 14 oct. 2016 a las 15:35
  • Te queda mucho por aprender todavía amigo
    – Kalamarico
    el 14 oct. 2016 a las 18:32
  • Y si, por algo estoy acá :) el 14 oct. 2016 a las 21:21
2

puedes simplemente poner una condición en la función ejecutarConsultarColegios, puedes remover el resto de funciones y quedaría:

  gestionColegio.ejecutarConsultarColegios = function () {
        if ($location.url() == '/institucion'){
          appConstant.MSG_LOADING("Cargando datos, espere un momento...");
          appConstant.CARGANDO();
        }
        colegioEntityServices.buscarColegio().then(function (data) {
            var colegio = {};
            gestionColegio.colegios = [];
            angular.forEach(data, function (value, key) {
                colegio = {
                    id: value.id,
                    codigoInstitucionAcademica: value.codigoInstitucionAcademica,
                    nombreInstitucionAcademica: value.nombreInstitucionAcademica,
                    idPais: value.idPais,
                    idDepartamento: value.idDepartamento,
                    idMunicipio: value.idMunicipio,
                    nombrePais: value.nombrePais,
                    nombreDepartamento: value.nombreDepartamento,
                    nombreMunicipio: value.nombreMunicipio,
                    sectorAcademicoLV: value.sectorAcademicoLV,
                    estadoLV: value.estadoLV,
                    caracterAcademicoLV: value.caracterAcademicoLV,
                    nombreSector: value.nombreSector,
                    nombreEstado: value.nombreEstado,
                    nombreCaracterAcademico: value.nombreCaracterAcademico,
                    colegioOtro: value.codigoInstitucionAcademica === "000000000000"
                };
                gestionColegio.colegios.push(colegio);
            });
            appConstant.CERRAR_SWAL();
        }).catch(function (e) {
            return;
        });

    };
2
  • de acuerdo con la solución propuesta por @Genesis Guerrero, todo viene, Cesar Gomez por lo que te comentaba en mi respuesta, el concepto de como Angular instancia sus componentes y de cómo realmente funciona y qué es, el ciclo de digest.
    – Kalamarico
    el 14 oct. 2016 a las 13:05
  • Por casualidad copiaste tu solución de mi respuesta? ;P
    – devconcept
    el 14 oct. 2016 a las 13:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.