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

mcn*_*a86 20 modal-dialog jquery-isotope angularjs angular-ui

我打算在打开时将一些模型数据传递到模态窗口.当用户点击一个元素时,我想让模态窗口打开,并显示与点击内容有关的更多详细信息.

除了将数据传递到模态窗口之外,我已经创建了一个按照我想要的方式工作的plunker.

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

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

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

Mat*_*cci 32

怎么样这个

我添加了该项目的决心

resolve: {
    items: function () {
        return $scope.items;
    },
    item: function(){
        return size;
    }
}
Run Code Online (Sandbox Code Playgroud)

而在controller我正在做的事:$scope.item = item;注射后item


小智 15

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

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

$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;
    }
  }
});
Run Code Online (Sandbox Code Playgroud)

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

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');
  };
});
Run Code Online (Sandbox Code Playgroud)