sábado, 30 de janeiro de 2016

Route + reload e ng-click com bind

Estou usando route numa aplicação AngularJS de um cliente que estou dando manutenção. Usando PHP, AngularJS e Bootstrap.
Ao clicar num link imaginei que iria chamar novamente o controller mas isso não acontece pois utiliza o cache, devido isso tive que pensar de outra forma.
Então, removi o a href e usei o ng-click chamando uma função controlando se o item clicado foi o último clicado e se for o caso fazer o reload, pois limpar o cache também não resolveu.

Rotina pronta, outra situação para contornar o ng-click não aceita muito bem bind, no html até aparece certo mas ao passar para a function vai com os {{. Então tive que usar o parâmetro adicional no html com os parâmetros e a function ler este atributo do elemento target. E um outro detalhe como tenho um img dentro de uma tag a, na function ainda tive que verificar os parâmetros no parent do target porque dependendo de onde clicasse ia a img e não a tag a, ficando assim o código;

HTML
<a id='botao' ng-click="loadOption('transpextraform', $event);" 
                 data-parametros="{{::idEmpresa}}/{{item.id}}" title='Alterar'>
<img class='img_manutencao' src='../img/bt_019.gif' alt='Alterar'> ALTERAR
</a>

JS
function getTargetEvent(event) {
    return event.target || event.srcElement;
}

app.service("appService", function($rootScope, $route, $location, $http) {
    $rootScope.opcaoCorrente = {opcao: "", parametros: ""};
    
    $rootScope.loadOption = function(opcao, $event) {
        var target = $(getTargetEvent($event));
        var parametros = target.attr("data-parametros");
        
        if (!parametros) {
            parametros = target.parent().attr("data-parametros");
        }

        if (opcao === $rootScope.opcaoCorrente.opcao 
&& parametros === $rootScope.opcaoCorrente.parametros) {
            $route.reload();
        } else {
            $rootScope.opcaoCorrente.opcao = opcao;
            $rootScope.opcaoCorrente.parametros = parametros;
            
            if (parametros) {
                $location.path("/" + opcao + "/" + parametros);
            } else {
                $location.path("/" + opcao);
            }
        }
    };
});

Nenhum comentário:

Postar um comentário