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:
- No llamar a esa función
- 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();
}