AngularJS 打开一个模态到一个指令答案

【问题标题】：AngularJS Open a modal into a directiveAngularJS 打开一个模态到一个指令
【发布时间】：2015-01-09 09:56:55
【问题描述】：

我无法使用“Angular Foundation Modal Directive”（使用 Angular 1.2）。我有一个包含许多元素（> 100）的滑块。当我单击一个元素（以下 sn-p 中的 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="">

问题是：为什么会出现这个错误？这有什么问题？

感谢您的帮助。

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

您的 DOM 元素注册了两次相同的指令。当您在页面中多次包含同一个库时，通常会发生这种情况，如评论中所述 about bootstrap.ui

您应该检查 modalBackdrop 指令是否没有多次包含在您的 index.html 文件中。

【讨论】：