angularJs中的一个页面中的两个模态

Question

我有一个指令模式，以及两个带ng-click="toggleModal()"的按钮，我如何为每个按钮显示一个包含ng-transclude

的不同内容的模态

.directive('modal', function () {
    return {
        template: '<div class="modal fade" id="modal1">' +
        '<div class="modal-dialog">' +
        '<div class="modal-content">' +
        '<div class="modal-header">' +
        '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
        '<h5 class="popup-header">{{ title }}</h5>' +
        '</div>' +
        '<div class="modal-body" style=" background: #f8fafb" ng-transclude>' +
        '</div>' +

        '</div>' +
        '</div>' +
        '</div>',
        restrict: 'E',
        transclude: true,
        replace: true,
        scope: true,
        link: function postLink(scope, element, attrs) {
            scope.title = attrs.title;

            scope.$watch(attrs.visible, function (value) {
                if (value == true)
                    $(element).modal('show');
                else
                    $(element).modal('hide');
            });

            $(element).on('shown.bs.modal', function () {
                scope.$apply(function () {
                    scope.$parent[attrs.visible] = true;
                });
            });

            for (var ii = 1; ii < 12; ii++) {
                if ($('#nestable' + ii)) {
                    $(element).on('shown.bs.modal', function () {
                        $('#nestable'+ ii).nestable();
                    });
                }
            }

            $(element).on('hidden.bs.modal', function () {
                scope.$apply(function () {
                    scope.$parent[attrs.visible] = false;
                });
            });
        }
    };
})

和按钮

     var button1='<div ng-click="toggleModal()"  class="safe btn btn-default btn-white btn-segmentation">'+$scope.displayName+'</div>';
var button2='<div ng-click="toggleModal()"  class="safe btn btn-default btn-white btn-segmentation">'+$scope.displayName+'</div>';

更多：

$scope.displayName = ($scope.selectedTree !=='' ) ? $scope.selectedTree : filterName;
                        $scope.modalContent = '<modal'+i+' title="Sélection de la ' + filterName + '" visible="showModal">';
                        $scope.modalContent +='<div class="modal-body" style=" background: #f8fafb">'+treeList+'</div>' ;
                        $scope.modalContent +="<div class=\"modal-footer\"><button class=\" btn btn-default btn-white\" data-dismiss=\"modal\" aria-hidden=\"true\" ng-click=\"addToSelectedFilters('-1|"+filterName+"',false);toggleModal();\">Cancel</button></div>" ;
                        $scope.modalContent +='</modal'+i+'>';
                        angular.element(document.getElementById( '#' + filterCoords)).append($compile($scope.modalContent)($scope));
                        var buttonTree='<div ng-click="toggleModal()"  class="safe btn btn-default btn-white btn-segmentation">'+$scope.displayName+'</div>';
                        var compiledButton = $compile(buttonTree)($scope);
                        $( '#' + filterCoords).html(compiledButton);