1

Estimados, estoy utilizando $transitions para identificar desde que $state se esta llegando a uno determinado.

$transitions.onSuccess({ from: 'trabajos/nuevo_trabajo' }, (trans) => {
    cargarDatos();
});

var cargarDatos = function(){
    nuevoVehiculo = angular.fromJson(SessionFactory.getDataByKey('nuevoVehiculo'));
    if (nuevoVehiculo) {
        $scope.data.nombre_cliente = nuevoVehiculo.nombre_cliente;
        $scope.data.patente = nuevoVehiculo.patente;
        $scope.data.anio = nuevoVehiculo.anio;
        $scope.data.kilometros = nuevoVehiculo.kilometros;
        $scope.data.marca = nuevoVehiculo.marca;
        $scope.data.modelo = nuevoVehiculo.modelo;
        $scope.data.cilindrada = nuevoVehiculo.cilindrada;
        $scope.data.telefono = nuevoVehiculo.telefono_cliente;
    }
    console.log($scope.data);
}

HTML:

<form name="nuevoVehiculoForm" data-ng-submit="nuevoVehiculo()">
    <div layout layout-sm="column">
        <md-input-container flex class="input-form-custom">
            <label>Patente</label>
            <input required name="patente" ng-model="data.patente" ng-pattern="/^((([a-z]|[A-Z]){2}[0-9]{4})|(([a-z]|[A-Z]){4}[0-9]{2}))$/" maxlength="6">
            <div ng-messages="nuevoVehiculoForm.patente.$error">
                <div ng-message="required">Patente es obligatoria.</div>
                <div ng-message="pattern">Patente inválida.</div>
            </div>
        </md-input-container>
        <md-input-container flex class="input-form-custom">
            <label>Año</label>
            <input required name="anio" ng-model="data.anio" type="number">
            <div ng-messages="nuevoVehiculoForm.anio.$error">
                <div ng-message="required">Debe ingresar un Año.</div>
            </div>
        </md-input-container>
        <md-input-container flex class="input-form-custom">
            <label>KM</label>
            <input required name="kilometros" ng-model="data.kilometros" type="number">
            <div ng-messages="nuevoVehiculoForm.kilometros.$error">
                <div ng-message="required">Debe ingresar un Kilometraje.</div>
            </div>
        </md-input-container>
    </div>
    <div layout layout-sm="column">
        <md-input-container flex class="input-form-custom">
            <label>Marca</label>
            <input required name="marca" ng-model="data.marca">
            <div ng-messages="nuevoVehiculoForm.marca.$error">
                <div ng-message="required">Debe ingresar Marca.</div>
            </div>
        </md-input-container>
        <md-input-container flex class="input-form-custom">
            <label>Modelo</label>
            <input required name="modelo" ng-model="data.modelo" type="text">
            <div ng-messages="nuevoVehiculoForm.modelo.$error">
                <div ng-message="required">Debe ingresar Modelo.</div>
            </div>
        </md-input-container>
        <md-input-container flex class="input-form-custom">
            <label>Cilindrada</label>
            <input required name="cilindrada" ng-model="data.cilindrada" type="number">
            <div ng-messages="nuevoVehiculoForm.cilindrada.$error">
                <div ng-message="required">Debe ingresar Cilindrada</div>
            </div>
        </md-input-container>
    </div>
    <div layout layout-sm="column">
        <md-input-container flex class="input-form-custom">
            <label>Nombre completo</label>
            <input type="text" required name="nombre_cliente" ng-model="data.nombre_cliente" columns="1" md-maxlength="150"></input>
            <div ng-messages="nuevoVehiculoForm.nombre_cliente.$error">
                <div ng-message="required">Nombre completo es obligatorio.</div>
            </div>
        </md-input-container>
        <md-input-container flex class="input-form-custom">
            <label>Telefono</label>
            <input ng-pattern="/^([0-9]*)?$/" minlength="11" maxlength="11" required name="telefono" ng-model="data.telefono" type="text">
            <div ng-messages="nuevoVehiculoForm.telefono.$error">
                <div ng-message="required">Teléfono es obligatorio</div>
                <div ng-message="minlength">Teléfono debe tener 11 caracteres.</div>
                <div ng-message="maxlength">Teléfono debe tener 11 caracteres.</div>
                <div ng-message="pattern">Teléfono debe ser numérico</div>
            </div>
        </md-input-container>
    </div>
    <center>
        <button ng-disabled="!canSubmit()" type="button" class="btn btn-success" ng-click="ingresarNuevoVehiculo()">Ingresar</button>
    </center>
</form>

La impresión de $scope.data me refleja los cambios y actualiza el modelo. Sin embargo, en el codigo HTML no se ve reflejado el cambio. No se porque no se actualiza.

EDICION

Logre hacer funcionar el stateChangeSuccess pero aun asi, el modelo no se actualiza. Me parece que el problema no pasa por eso, agregue codigo html.

<script src="https://unpkg.com/@uirouter/[email protected]/release/angular-ui-router.min.js"></script>
<script src="bower_components/angular-ui-router/release/stateEvents.min.js"></script>
4
  • Hay forma de que puedas mostrar un ejemplo reproduciendo el error?
    – Einer
    Commented el 27 dic. 2017 a las 13:39
  • Intentare hacer un codePen y te comento!
    – sioesi
    Commented el 27 dic. 2017 a las 13:40
  • Agrega el html para confirmar que esta utilizando en el modelo correcto en tu vista
    – Einer
    Commented el 29 dic. 2017 a las 1:59
  • @Einer agregue el html!
    – sioesi
    Commented el 29 dic. 2017 a las 12:44

2 respuestas 2

0

Lo que pasa es que la funcion donde realizas los cambios no pertenece al $scope y por tanto, no se actualiza de forma automática. Para que lo haga, debes hacer lo siguiente:

var cargarDatos = function(){
    nuevoVehiculo = angular.fromJson(SessionFactory.getDataByKey('nuevoVehiculo'));
    if (nuevoVehiculo) {
        $scope.$apply(function() {
            $scope.data.nombre_cliente = nuevoVehiculo.nombre_cliente;
            $scope.data.patente = nuevoVehiculo.patente;
            $scope.data.anio = nuevoVehiculo.anio;
            $scope.data.kilometros = nuevoVehiculo.kilometros;
            $scope.data.marca = nuevoVehiculo.marca;
            $scope.data.modelo = nuevoVehiculo.modelo;
            $scope.data.cilindrada = nuevoVehiculo.cilindrada;
            $scope.data.telefono = nuevoVehiculo.telefono_cliente;
            console.log($scope.data);
        });
    }
}

Con eso consigues que data sea forzada a VER que se hizo una actualización y actuar entonces en base a eso. Saludos.

1
  • Hola!, gracias por tu respuesta.. pense eso tambien pero aplique el $apply y tampoco funciono
    – sioesi
    Commented el 28 dic. 2017 a las 0:07
0

Hay distintas posibles causas como:

  • La llamada asíncrona no se termina a tiempo para renderizarse.
  • El ciclo de $digest está en destiempo.

Puedes probar alguna de las siguientes alternativas:

  1. $transitions.onSuccess({ from: 'trabajos/nuevo_trabajo' }, (trans)=>
    {
        $timeout(cargarDatos());
    });
    
  2. $transitions.onSuccess({ from: 'trabajos/nuevo_trabajo' }, (trans)=> 
    {
        cargarDatos(); 
        $digest();
    });
    
  3. Revisar que no esté usando one time bind.

    {{ ::vm.data.nombre}}
    
6
  • Hola!, muchas gracias por tu respuesta, lamentablemente ninguna de las opciones me funciono... en el punto 3 a que te refieres? yo utilizo los modelos en el html asi : <input required name="anio" ng-model="data.anio" type="number">
    – sioesi
    Commented el 28 dic. 2017 a las 0:07
  • la opción de one time binding se usa para que los objetos o variables que se especifiquen en la sintaxis mencionada dejen de ser incluidos en el ciclo de $digest una vez que estos tengan un valor valido por primera vez. toddmotto.com/angular-one-time-binding-syntax
    – Sieg
    Commented el 28 dic. 2017 a las 0:12
  • la verdad no lo utilizo... no se porque no se carga la data.. me esta rompiendo la cabeza este problema!!
    – sioesi
    Commented el 28 dic. 2017 a las 0:13
  • ya intentaste crear un servicio para acceder a la información desde fuera de ese controller? Y por cierto, si lo que necesitas es tener información sobre el estado anterior, te recomiendo que lo pongas en el $rootScope y no en el $scope del controller de el $state
    – Sieg
    Commented el 28 dic. 2017 a las 0:15
  • el SessionFactory guarda información en el localStorage, mi idea principal es que si se viene de trabajos/nuevo_trabajo, recupere la información, de lo contrario que deje el formulario vacio.
    – sioesi
    Commented el 28 dic. 2017 a las 0:20

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.