Question

我试图根据点击图像地图的哪个区域弹出不同的模态。 imagemap的每个区域都与来自JSON文件的信息相关联，我需要能够在为每个房间创建唯一模式时引用该信息。要做到这一点，我需要我的模态指令所在的范围来访问主控制器范围内的信息。我知道发布了类似的问题并且相信我已经尝试实施我找到的任何解决方案，但我无法得到任何有用的东西。

这是包含控制器和模态指令的应用程序页面，其中的评论提到了我尝试的内容：

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

以下是使用该指令的html，需要访问前一个范围内的“rooms”和“roomId”

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

这里有一个无效的小提琴，但它的代码全部集中在一个地方http://jsfiddle.net/nateholmes3/kh6vsd1b/2/

要明确模态完全正常，它只需要访问这些变量。提前一点谢谢

Answer 1

看看角度引导程序https://angular-ui.github.io/bootstrap/如何实现它们的模态。使用它时，仍然可以访问创建模态的控制器的范围。

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

1 个答案: