entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

Problema con ejecutar un metodo cuando termino con mi ngDialog en AngularJS

Buenos Días, ejecuto el ngDialog pero una vez que este termina su trabajo haciendo clic por ejemplo en editar quiero que la lista que tengo de frases se me actualise automaticamente.
tengo mi controller:
(function() {
'use strict';

angular
    .module('admin')
    .controller('FraseController', FraseController);

FraseController.$inject = ['FraseService','ngDialog'];

function FraseController(FraseService,ngDialog) {
    var vm = this;

    vm.texto   = 'Frase Ocasional';
    vm.listar  = [];        
    vm.nfrase  = '';        
    vm.efrase  = '';      
    vm.eid     = 0; 

    activate();

    vm.edit = function(){    
        FraseService.set_id(vm.eid);
        ngDialog.open({
            template: 'editFrase',                 
            controllerAs: 'efrase',               
            controller: ['FraseService', function(FraseService) {
                var vm = this;
                vm.eid = FraseService.get_id();
                vm.frase = {};
                cargar();

                    function cargar(){
                        FraseService.get(vm.eid).then(function(response){ 
                            vm.frase = response.data.response;                     
                        });
                    }
                    vm.editar = function(){                        
                        if(FraseService.update(vm.frase)){
                            refresh(); // este es el método que me refrescaría la lista del controlador padre que visualiso en mi html pero no me funciona y como uso this no se como escalar para llamar al $scope padre pero tampoco se si eso funcionaría pues como en el padre no uso scope sino this no entiendo esto bien.
                        }
                    }
                }]                
        });            
    }

    vm.drop = function(){
        FraseService.drop(vm.eid).then(function(response) {
            console.log(response.data.response);
            refresh(); // aqui si me funciona;
        });
    }

    function refresh(){
        FraseService.getAll().then(function(response) {
                vm.listar = response.data.response;
        });
    }

    function activate() {            
        FraseService.getAll().then(function(response) {
            vm.listar = response.data.response;
        });
    }
}

}());
Quiero que se me actualice la lista una vez se me edite un elemento que se guarda en el api que a su vez actualiza la database entonces quiero que se llame de nuevo al api y me resfresque la lista que tengo.
Saludos cordiales D

2 Respuestas

2votos

dairon Puntos17120

Buenos Días, aquí les dejo como resolví todos mis problemas con ngDialog.
como lo ejecuto esperando una respuesta lo invoco con ngDialog.openConfirm y según la respuesta ejecuto los métodos de mi clase madre y le paso como parámetro un objeto de donde onsumiré sus datos.
Este es mi código para eliminar una Frase.
el JS en mi controller:

vm.drop = function(__frase){ //Elimina la frase
            ngDialog.openConfirm({
                template:   '<h3>Está seguro de Eliminar la Frase<h3> '+                            
                            '<div class="modal-footer"> '+
                                '<button type="button" '+
                                    'ng-click=closeThisDialog("Cancelo") '+
                                    'class="btn btn-default">Cancelar'+
                                '</button> '+
                                '<button type="button" '+
                                    'ng-click=confirm(dfrase.frase.id) '+
                                    'class="btn btn-primary">Eliminar</button> '+
                            '</div>',
                plain:true, 
                controllerAs: 'dfrase',               
                controller: [function() {
                    var vm = this;                    
                    vm.frase = __frase;                                      
                    }]                
                })
            .then(
                function(value) { //Acepta                    
                    FraseService.drop(value).then(function(response) {
                        console.log(response.data.response);
                    });
                    refresh();
                },
                function(value) { //Cancela
                    console.log(value);
                }
            );
        }

Consumo el servicio de Frases que es un factory con el cual interactuo con mi api y el metodo refresh que me refresca la lista de elementos frases.
saludos D

2votos

white Puntos75880

Hola @dairon, lograste resolverlo?

FraseService.update es una funcion que regresa una promesa? si es así tendrías que colocar un callback, deberás trabajar de manera asíncrona.

FraseService.update(id).then(function () {
    refresh();
});

Te podría sugerir que tu dialogo tenga su propio controlador de esta forma lo mantienes mas ordenado.

En este caso no es necesario inyectar el servicio FraseService en el controlador del dialogo,

controller: ['FraseService', function(FraseService) {

ya que previamente la inyectaste en el controlador FraseController,

FraseController.$inject = ['FraseService','ngDialog'];

llamando a refresh desde el controlador de tu dialogo sería suficiente, te da algún error?

puedes llamar a refresh sin ningun problema por que tu controlador del dialogo esta dentro del contexto del controlador FraseController, en caso de que no este en este ( por ejemplo tu dialogo tiene un controlador aparte ), podrías hacer uso de $rootScope.$broadcast y $scope.$on para emitir eventos con información a otros controladores.

/* if(FraseService.update(vm.frase)) ¿update es asíncrono? */

FraseService.update(vm.frase).then(function(response) {
    $rootScope.$broadcast('frase-editada', {
        response: response.data.response
    });
});

y en tu controlador FraseController:

activate();

// ...

$scope.$on('frase-editada', function(event, data) {
    // aca hacemos algo con data?
    // o talvez solo llamamos a refresh() ?
});

$broadcast emite el evento hacia abajo, lo contrario a $emit

0voto

dairon comentado

si ya resolví el problema, es en parte como mencionas, impementé un controlador independiente dentro de mi ngDialog, y el refresh no necesito que sea asincrono más bien que sea luego de ejecutar el código anterior sino no me refresca los cambios.
Ya arreglé todos los métodos solo que puse el de eliminar por ser el más corto ;) pero ya los tengo todo arreglados.
gracias @white como siempre tus conocimientos me ayudan a aprender más.
Saludos D

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta