Directive Angular

Question

I’m having a little problem when creating two buttons using angular Directive only 1 this appearing. How do I solve this problem?

<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;
}); 

Answer 1

You put:

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

The right thing would be:

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

Notice? Closing the tag my-boot-edit you put my-my-my-danger

Answer 2

Good morning, try to separate your Ids into different files, follow the link of a good practice tutorial in en good practice tutorial in

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) {

  }
}