AngularJS Открыть код в директиве

Question

У меня возникли проблемы с использованием «Угловой фундаментальной директивы» (с угловым 1.2). У меня есть ползунок, содержащий много элементов (> 100). Когда я нажимаю на элемент (div в следующем фрагменте), я хочу отобразить «модальный». Мой DOM выглядит следующим образом:

<ul class="broadcasts"> 
    <li><div ng-click="showDetails(broadcast)"></div></li> 
    ... 
</ul> 

Теперь, чтобы создать модальное я имею следующую директиву и шаблон:

schedulesDirectives 
    .directive('broadcasts', ['broadcastModalService', function(broadcastModalService) { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: { 
     broadcasts: '=', 
     domain: '=' 
     }, 
     templateUrl: 'components/schedules/partials/broadcasts.html', 
     link: function(scope, elem, attrs) { 
     scope.showDetails = function (broadcast) { 
      console.log("showDetails clicked on broadcast ", broadcast); 

      broadcastModalService.open(broadcast); 
     } 
     } 
    } 
    }]) 

<div> 
    <script type="text/ng-template" id="broadcastDetail.html"> 
     <h3>I'm a modal!</h3> 
     <a class="close-reveal-modal" ng-click="cancel()">&#215;</a> 
    </script> 
</div> 

Это услуга, которая должна возвращать уникальный экземпляр:

broadcastsServices.service('broadcastModalService', ['$modal', 
    function($modal) { 

    this.open = function(broadcast) { 
     return $modal.open({ 
     templateUrl: 'components/broadcasts/partials/broadcastDetail.html', 
     controller: 'BroadcastDetailCtrl', 
     resolve: { 
      broadcast: function() { 
      return broadcast; 
      } 
     } 
     }); 
    }; 

    }]); 

И, наконец, контроллер:

broadcastsControllers.controller('BroadcastDetailCtrl', ['$scope', '$stateParams', '$log', '$modalInstance', 'broadcast', 
    function($scope, $stateParams, $log, $modalInstance, broadcast) { 

    $scope.broadcast = broadcast; 
    $log.debug('Got broadcast ' + broadcast.title); 

    $scope.cancel = function() { 
     $modalInstance.dismiss('cancel'); 
    }; 

    }]); 

Теперь проблема, когда я нажимаю на моем <div ng-click="showDetails(broadcast)">, $log.debug('Got broadcast ' + broadcast.title); отображает правильное значение, но дважды, и я получаю следующее сообщение об ошибке в моей консоли:

Error: [$compile:multidir] Multiple directives [modalBackdrop, modalBackdrop] asking for template on: <div class="reveal-modal-bg fade" ng-class="{in: animate}" ng-click="close($event)" style="display: block;display: block" modal-backdrop=""> 

Возникает вопрос: почему же я понимаю, что ошибка? Что в этом плохого?

Спасибо за помощь.

Answer 1

У вас есть та же директива, которая зарегистрирована дважды для вашего элемента DOM. Это часто происходит, когда вы включаете те же библиотеки несколько раз в вашей странице, как сказано в комментариях about bootstrap.ui

Вы должны проверить, если директива modalBackdrop не включаются несколько раз в файле index.html.