UI-Router – Cambiar $estado sin volver a renderizar/recargar la página

Luego de de una prolongada compilación de datos hemos podido solucionar esta incógnita que suelen tener algunos los lectores. Te ofrecemos la respuesta y nuestro deseo es que resulte de gran apoyo.

Solución:

Para este problema, puede simplemente crear un estado secundario que no tenga ni templateUrl ni controllery avanzar entre states normalmente:

// UPDATED
$stateProvider
    .state('schedules', 
        url: "/schedules/:day/:month/:year",
        templateUrl: 'schedules.html',
        abstract: true, // make this abstract
        controller: function($scope, $state, $stateParams) 
            $scope.schedDate = moment($stateParams.year + '-' + 
                                      $stateParams.month + '-' + 
                                      $stateParams.day);
            $scope.isEdit = false;

            $scope.gotoEdit = function() 
                $scope.isEdit = true;
                $state.go('schedules.edit');
            ;

            $scope.gotoView = function() 
                $scope.isEdit = false;
                $state.go('schedules.view');
            ;
        ,
        resolve: ...
    )
    .state('schedules.view',  // added view mode
        url: "/view"
    )
    .state('schedules.edit',  // both children share controller above
        url: "/edit"
    );

Un concepto importante aquí es que, en ui-routercuando la aplicación está en un estado particular (cuando un estado está “activo”), todos sus estados antecesores también están implícitamente activos.

Entonces, en este caso,

• cuando su aplicación avanza del modo de visualización al modo de edición, su estado principal schedules (junto con su templateUrl, controller e incluso resolve) aún se mantendrá.
• dado que los estados antecesores se activan implícitamente, incluso si el estado secundario se actualiza (o se carga directamente desde un marcador), la página seguirá mostrándose correctamente.

REF: https://github.com/angular-ui/ui-router/wiki/Quick-Reference#statetransitiontoto-toparams–options

$state.transitionTo('yourState', params, notify: false);

Sección de Reseñas y Valoraciones

Eres capaz de confirmar nuestro cometido exponiendo un comentario o dejando una valoración te estamos agradecidos.

---

---

Utiliza Nuestro Buscador