CODEWITHSUNDEEP
angularjsangularjs-directive
Greg
Greg

Reputation: 167

AngularJS Open a modal into a directive

I have trouble using "Angular Foundation Modal Directive" (with Angular 1.2). I have a slider containing many elements (> 100). When I click on an element (the div in the following snippet), I want to display a "modal". My DOM looks like:

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

Now, to create the modal I have the following directive and template:

  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>

This is the service that should return a unique instance:

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

  }]);

And finally, the controller:

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

  }]);

Now, the problem is when I click on my <div ng-click="showDetails(broadcast)">, $log.debug('Got broadcast ' + broadcast.title); displays a correct value but twice, and I get the following error in my console:

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="">

The question is: why do I get that error? What is wrong about that?

Thanks for helping.

Upvotes: 0

Views: 1093

Answers (1)

seyjay
seyjay

Reputation: 48

You have the same directive that is registered twice for your DOM element. This often happens when you include the same library several times in your page, as said in comment about bootstrap.ui

You should check if the modalBackdrop directive is not included several times in your index.html file.

Upvotes: 1

Related Questions