Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

ng-click não funciona dentro de uma diretiva

Referente ao curso AngularJS: crie webapps poderosas, no capítulo Dados inconsistentes? Precisamos removê-los ou alterá-los! e atividade Removendo e editando fotos

por Vanderlei J Alamino
| 209.4k xp | 29 posts
Frontend Developer

Olá pessoal.

Uma dúvida, estou querendo passar o ng-click dentro de uma diretiva, mas aí o controller não consegue chamar a função.

Olha um exemplo.

Chamada da Diretiva 
<diretiva titulo="{{foto.titulo}}"></diretiva>
Configuração da Diretiva em JS seguindo o exemplo do curso 
.directive('diretiva', function(){
        var ddo = {};
        ddo.restrict = "EA";            
        ddo.scope ={
            titulo: '@',
        };
        ddo.templateUrl = "js/directives/minha-diretiva.html";
        return ddo;
    })
Html da Diretiva com o ng-click que não está funcionando 
<div>
    {{titulo}} <br>
    <a class="btn" ng-click="remover()">Remover</a>            
 </div>
Controller com a chamada do ng-click retornando um alert simples 
angular.module('myApp')
    .controller('myCtrl', function($scope){    
        $scope.remover = function(){
            alert('ok');
        };
    });

Alguma ajuda? :/

2 respostas
solução!
por Vanderlei J Alamino
| 209.4k xp | 29 posts
Frontend Developer

Consegui galera!!!

Seguindo o exemplo da aula, bastou fazer alguns ajustes e passar alguns parâmetros para tudo funcionar direito.

No JS da diretiva

Basta colocar esse trecho junto aos outros parâmetros ddo.

  • Passe o $http dentro da function.
  • Adicione o id junto ao scope.
  • Crie o parâmetro link dentro do ddo, conforme o exemplo das aulas.
  • Agora é só colocar a função de remoção conforme é mostrado na aula.
.directive('diretiva', function($http){
    ddo.scope ={
        titulo: '@',
        url: '@',
        id: '@'
    };
    ddo.link = function($scope, element, attrs) {
        $scope.remover = function(id) {
            $http.delete('/v1/fotos/' + id)
                .success(function() {
                     alert('deletei');
                })
                .error(function(erro) {
                    console.log(erro);
            });
         }
    };
})
No html da diretiva

Passe o id dentro do ng-click que tinha sido criado.

<div>
    {{titulo}} <br>
    <a class="btn" ng-click="remover(id)">Remover</a>            
 </div>
Na chamada da Diretiva

Passe o parâmetro id conforme segue o exemplo do curso.

<diretiva titulo="{{foto.titulo}}" id="{{foto._id}}"></diretiva>

É isso, galera.

Valeu!!!

por Matheus Narito Yoneoka
| 101.5k xp | 19 posts
Analista de Engenharia de Produto

Muito boa a dica, também estou usando o botão dentro de uma diretiva e funcionou muito bem a solução!