Angular-ui模态 - 将数据传递给模态

I am trying to pass some model data into a modal window when it is opened. When the user clicks on an element I want to have the modal window open and display more detailed information relating to what was clicked on.

我打算在打开时将一些模型数据传递给模态窗口。当用户点击我希望打开模态窗口的元素时，显示与点击内容有关的更详细信息。

I have created a plunker that works how I want it to except for passing the data into the modal window.

除了将数据传递到模态窗口之外，我已经创建了一个可以实现我想要的方式的plunker。

I am trying to pass the data in using ng-click:

我试图使用ng-click传递数据：

<img ng-src="{{item.picture}}" width="100" ng-click="open(item)"/>

Can anyone help me with this? or point me in the right direction?

谁能帮我这个？还是指向正确的方向？

3 个解决方案

#1

How about this?

这个怎么样？

I added the item to the resolve

我添加了该项目的决心

resolve: {
    items: function () {
        return $scope.items;
    },
    item: function(){
        return size;
    }
}

And in the controller I am doing: $scope.item = item; after injecting the item

在我正在做的控制器中：$ scope.item = item;注射物品后

#2

I've made a plunker for you at http://plnkr.co/FzU5SOv3pdZmAPAIOzdo.

我在http://plnkr.co/FzU5SOv3pdZmAPAIOzdo上为你做了一个傻瓜。

You want to resolve your data much like you do items currently.

您希望像处理当前项目一样解析数据。

$scope.open = function (size) {

var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  resolve: {
    items: function () {
      return $scope.items;
    },
    size: function() {
      console.log('size: ', size);
      return size;
    }
  }
});

and in your modal controller make sure to include the now resolved size object as follows:

并在您的模态控制器中确保包括现在解析的大小对象，如下所示：

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items, size) {

  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };
  $scope.size = size;

  $scope.ok = function () {
    $modalInstance.close($scope.selected.item);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
});

#3

What worked for me was to create an object within resolve that returns an object that holds the variables that I wanted to share.

对我有用的是在resolve中创建一个对象，它返回一个包含我想要共享的变量的对象。

resolve: {
  shared: function(){
    return {
      name: 'Spencer',
      numbers: [1, 2, 3]
    }
  }
}

To access the shared object, include it when defining your modal instance controller.

要访问共享对象，请在定义模式实例控制器时包含它。

app.controller('ModalInstanceController', function($scope, shared, $uibModalInstance,

#1