Solucionado (ver solução)

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

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