0

Estou com um pequeno problema ao criar dois botões usando directive do angular somente 1 esta aparecendo.Como resolvo esse problema?

<div class="row">
<meu-painel class="col-md-2 painel-animado" titulo="{{foto.titulo}}" ng-repeat="foto in fotos | filter: filtro">
    <minha-foto url="{{foto.url}}" titulo="{{foto.titulo}}"></minha-foto>
    <meu-botao-editar href="/fotos/edit/{{foto._id}}" nome="Editar"></meu-botao-perigo>
    <meu-botao-perigo acao="remover(foto)" nome="Remover"></meu-botao-perigo>
</meu-painel>

angular.module("minhasDiretivas", []).directive("meuPainel", function(){

    var ddo = {};

    ddo.restrict = "AE"; /* Tipo que pode ser usado: Atribute ou Element*/

    ddo.scope = {
        titulo : "@"
    }

    ddo.transclude = true; /* Configura para manter elementos filhos*/

    ddo.templateUrl = "js/directives/meu-painel.html";  /* Caminho da view*/

    return ddo;
})
.directive("minhaFoto", function() {

    var ddo = {};

    ddo.restrict = "AE";

    ddo.scope = {
        url : "@url",
        titulo : "@titulo"
    };

    ddo.template = "<img class='img-responsive center-block' src='{{url}}' alt='{{titulo}}'>";

    return ddo;
}).
directive("meuBotaoEditar", function(){

    var ddo = {};

    ddo.restrict = "AE";

    ddo.scope = {
        href : "@",
        nome : "@"
    }

    ddo.template = '<a href="{{href}}" type="button" class="btn btn-primary btn-block">{{nome}}</a>'

    return ddo;
})
.directive("meuBotaoPerigo", function() {

    var ddo = {};

    ddo.restrict = "AE"

    ddo.scope = {
        nome : "@",
        acao : "&"
    }

    ddo.template = '<button class="btn btn-danger btn-block" ng-click="acao()">{{nome}}</button>';

    return ddo;
}); 

2 Respostas 2

2

Você colocou:

<meu-botao-editar href="/fotos/edit/{{foto._id}}" nome="Editar"></meu-botao-perigo>
<meu-botao-perigo acao="remover(foto)" nome="Remover"></meu-botao-perigo>

O certo seria:

<meu-botao-editar href="/fotos/edit/{{foto._id}}" nome="Editar"></meu-botao-editar>
<meu-botao-perigo acao="remover(foto)" nome="Remover"></meu-botao-perigo>

Percebeu? Fechando a tag do meu-botao-editar vc colocou meu-botao-perigo

2
  • Puts realmente acabei copiando e esquecendo de mudar o final. 11/05/2016 às 16:39
  • @AlUnserAlbuquerque Marque a resposta como correta se ela resolveu o seu problema, por favor. 11/05/2016 às 16:54
0

Bom dia, procure separar suas directives em arquivos diferentes, segue o link de um tutorial de boas práticas em pt-Br tutorial de boas práticas em pt-Br

angular
.module('scond-app')
.directive('userContact', userContact);

function userContact() {
var directive = {
    link: link,
    templateUrl: '/app/user/templates/contact.directive.html',
    restrict: 'EA'
};
return directive;

function link(scope, element, attrs) {

  }
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .