javascript - example - ui sref angular 5

Vista de carga de ui-router angular dos veces

Question

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.

Answer 1

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

Answer 2

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