javascript - example - ui sref angular 5
Vista de carga de ui-router angular dos veces (2)
Estoy usando ui-router angular en mi aplicación angular. Para la parte de enrutamiento que he escrito
var routerApp = angular.module(''routerApp'', [''ui.router'']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise(''/home'');
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state(''home'', {
url: ''/home'',
templateUrl: ''partial-home.html'',
controller : function($scope,$state){
$scope.$on(''$viewContentLoaded'', function(){
console.log("home content loaded",$state.current);
})
}
})
// nested list with custom controller
.state(''home.list'', {
url: ''/list'',
template: ''I am using a list.''
})
// nested list with just some random string data
.state(''home.paragraph'', {
url: ''/paragraph'',
template: ''I could sure use a drink right now.''
})
});
En partial-home.html he escrito: -
<div class="jumbotron text-center">
<h1>The Homey Page</h1>
<p>This page demonstrates <span class="text-danger">nested</span> views.</p>
<a ui-sref=".list" class="btn btn-primary">List</a>
<a ui-sref=".paragraph" class="btn btn-danger">Paragraph</a>
</div>
<div ui-view></div>
Ahora cuando estoy ejecutando esta aplicación en el navegador, si abro la ruta
/home
La consola del navegador muestra una vez el "contenido del hogar cargado" y luego, si hago clic en el enlace de la lista, la barra de direcciones cambia a
/home/list
Y luego también la consola se muestra una vez.
Pero si actualizo la pestaña del navegador en ese momento (cuando la ruta es inicio / lista), la consola se muestra dos veces. Por favor, ayúdame por qué sucede esto.
Estas son vistas anidadas. La razón por la que hay dos mensajes en la consola después de la recarga es: cuando comienza en / home, se carga el estado inicial. Cuando vaya a / home / list allí, solo se debe cargar home.list dado que el estado inicial ya está cargado. Cuando recarga, hay dos estados que deben cargarse: home y home.list.
Editar: no tengo suficiente reputación, así que no puedo comentar. Supongo que usas ui-view dentro de la plantilla de inicio, lo que hace que el hijo y el padre compartan el mismo alcance. estás escuchando el alcance tanto del niño como del padre para el evento. por lo que es natural llamarse dos veces
porque home.list es un estado secundario de la casa y cuando recarga la página para home.list primero inicializa la vista del controlador doméstico que la vista del controlador de la lista, por lo que $ viewContentLoaded se llama dos veces
Supongo que usas ui-view dentro de la plantilla de inicio, lo que hace que el hijo y el padre compartan el mismo alcance. estás escuchando el alcance tanto del niño como del padre para el evento. por lo que es natural llamarse dos veces