Question

我无法使用“Angular Foundation Modal Directive”（使用Angular 1.2）。我有一个包含许多元素的滑块（＆gt; 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

中所述

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

AngularJS将模态打开到指令中

1 个答案: