Solucionado (ver solução)
Solucionado
(ver solução)
11
respostas

ng-click em um template de directive não funciona, porque?

Professor, uma dúvida que tive e não consegui resolver...

tenho uma function

$scope.abrir_produto = function(codigo){
    console.log('produto aberto : ' + codigo);
};

directive

diretivas.directive('botaoPersonalizado', function(){
    var ddo = {};

    ddo.restric = 'AE';

    ddo.scope = {
        codigo: '@'
    };

    ddo.templateUrl = 'diretivas/botao-personalizado.html';

    return ddo;
});

tenho minha directive ( template )

<!-- directive -->
<botao-personalizado codigo="{{produtos.codigo}}"></botao-personalizado>

<!-- dentro do template -->
<div class="btn bt-primary" ng-click="abrir_produto(codigo)">
</div>

Porque não funciona o ng-click? o que está faltando exatamente? ( OBS : quando não faço por directive ele funciona normal )

11 respostas

Opa!

Na sua diretiva está assim

 ddo.restric = 'AE'

O correto é

 ddo.restrict = 'AE'

Outra coisinha : não se usa _em nome de função ou propriedade em js. Troque o _ por camelCase

$scope.abrir_produto

Vira

$scope.abrirProduto

Mas ainda assim a forma como vc está fazendo não é a ideal. O que você quer fazer? Em qual capítulo do treinamento está?

Oi! E aí? Aguardo seu Feedback.

Professor, já terminei todo o curso, só não fiz os exercícios ainda, mas obrigado pelas dicas de boas práticas.

O que realmente preciso é fazer o ng-click que está dentro de um template do qual é uma directive funcione, pois o mesmo não funciona, se no meu controller : botaoPersonalizado , eu tenho uma função X específica, e eu utilizo directiva eu queria poder acessar via ng-click esta directiva.

Até achei uma solução colocando $parent.funcaoAqui() no ng-click, e ele funciona, porém se eu tiver outra função dessa em algum outro arquivo esse $parent acaba correndo o perigo de rodar uma outra função ou até mesmo mudar algum $scope que tenha, por isso queria saber como usar a função somente para o controller : botaoPersonalizado sem utilizar o $parent

No capítulo https://www.alura.com.br/course/angularjs-mvc/section/8/explanation eu ensino como criar uma diretiva, por exemplo, um botão. Quando clicado este botão chamará a função definida em um controller. É isso que você procura?

Dá uma revisada nesse capítulo e faça os exercícios. Se ainda continuar com dúvida, eu vejo como ajudá-lo. Se você já leu e continuou com dúvida, eu explico de outra forma aqui. Só me dá esse feedback.

Dica: para associar uma função com uma diretiva você usa o modificador &.

solução!

Era isso mesmo professor, obrigado. Me tire uma outra dúvida...

Como eu conseguia colocar um loading quando chamar o controller ( fotosCarregar ) e depois que o .success realmente imprimir as fotos o loading desaparecer?

Pois da forma que uso, o loading sai assim que entra no success, porém demora uns segundos para ser impressa a informação vinda de um get, daí praticamente não adianta usar o loading, qual seria a melhor opção exata de garantir que o loading só saia quando for impressa informação na tela?

# código

 $scope.fotos = [];
$scope.loading = true; // mostrar loading ( rodando )

$scope.carregar_fotos = function(){

$http.get('http://site/com/fotos/'+categoria)
.success(function(data){
$scope.fotos = data;
$scope.loading = false; // esconde loading ( rodando )
})
.error(function(error){
console.log(error);
});
};

NLeal, por padrão, só vai entrar no success quando os dados vierem do servidor. Se por exemplo, a requisição demora 5 segundos, demorará 5 segundos para que a função passada em successs seja chamada (ou se der um problema, a função de error). Se ela esta chamando antes, talvez tenha algum problema no código, porque esse é o comportamento padrão.

Você tem certeza que ele esta chamando success antes dos darem retornarem do servidor?

Os dados retornam, o success vem, mas a impressão demora uns segundos para ser feita na tela, é como se estivesse montando ainda na tela para ser impressa

São muitos, mas muitos dados? Digo isso porque qualquer solução pegará carona na finalização de uma requisição ajax para remover o loading.

Estou fazendo um ng-repeat porém controlado no backed para listar de 4 em 4, assim não pesa, fora isso meu front não estou fazendo nenhum tipo tratando de ng-if / ng-show / ng-hide ... até tentei fazer...

if(data.length >0){
$scope.loading = false; // esconder loading...
}

porém mesmo assim assim que "entra no success" ele já considera o loading como false, mesmo que demora alguns segundos para ser impresso a data na tela

Pois é, estou confuso mesmo. Só para garantir, o seu data é um array mesmo? Mas só tinha uma dúvida: o que vc está exibindo é imagem mesmo? E a página carrega, mas demora para exibir as imagens, é isso?

Sim, array, imagem + titulo, a página carrega, mas só demora mesmo é pra listar os itens na tela ( imprimir ).

O que quero éfazer um ( cachedObject ) quando realmente o objeto é jogado no cache que é quando ele vai exibir que preciso ter controle e saber que aquele momento X é quando o objeto foi jogado no cache

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software