将参数从控制器传递到模式指令

Question

I am trying to popup different modals based on which area of an imagemap is clicked. Each area of the imagemap is tied to information from a JSON file and I need to be able to refer to that information when creating the unique modal for each room. To do this i need the scope that my modal directive is under to access information in the scope of the main controller. I know there are similar questions posted and believe me I have tried to implement any solutions I have found but I cant get anything working.

here is the app page including the controller and modal directive with comments mentioning things ive tried:

var myApp = angular.module('myApp', []);

myApp.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
  $http.get('js/master.json').success(function(data) {
           $scope.rooms = data;
       });
$scope.showModal = false;
$scope.toggleModal = function(roomId){
    $scope.showModal = !$scope.showModal;
    $scope.roomId = roomId;
};
 $scope.load = function() {
      $('img[usemap]').maphilight();
    }
 }]);



myApp.directive('modal', function () {
    return {
      template: '<div class="modal fade">' + 
      '<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>' + 
            '<h1 class="modal-title">{{ title }}</h1>' + 
          '</div>' + 
          '<div class="modal-body" ng-transclude></div>' + 
        '</div>' + 
      '</div>' + 
    '</div>',
  restrict: 'E',
  transclude: true,
  replace:true,
  scope: true, //Ive tried changing "true" to "$scope"
  link: function postLink(scope, element, attrs) {
    scope.title = attrs.title;
    scope.rooms = scope.$parent.rooms; //doesnt work
    scope.roomId = scope.$parent.roomId; //doesn't work

<!--scope.$watch(attrs.rooms, function(value){
      scope.rooms = value;
    }); --> //tried something like this but doesnt work

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

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

and here is the html that uses the directive and needs access to "rooms" and "roomId" from previous scope

<img ng-src="images/housediagram.jpg" alt="Photo of thing" class="map" usemap="#houseMap" data-ng-init="load()">

  <map name="houseMap" id="map">
    <area ng-repeat="room in rooms" name="{{room.room}}" id="{{room.id}}" shape="poly" 
coords="{{room.coords}}" ng-click="toggleModal(roomId)"/>
  </map>

 <modal title="{{rooms[roomId].room}}" visible="showModal"> //title doesnt display anything
<ul>
    <li>
        <h4>Content dependent on data in 'room'</h4>
    </li>
</ul>
</modal>

here is a fiddle that doesnt work but it has the code all in one place http://jsfiddle.net/nateholmes3/kh6vsd1b/2/

And to be clear the modal works completely fine, it just needs to access those variables. thanks a ton in advance

Answer 1

Take a look at how angular bootstrap https://angular-ui.github.io/bootstrap/ implements their modal. When using it the scope of the controller that creates the modal is still accessible.