javascript - angularJS 将对象属性传递给模态

Question

我想将整个对象传递给模态，这样我就可以在那里查看它的所有属性。现在我有看起来像这样的项目:

$scope.items = [{ Title: title, Id: id }] 

在我的 html 页面中，我使用了“ng-repeat”，如下所示:

<tr ng-repeat="item in items | filter:search">
<td> {{item.Title}} </td>
<td> {{item.Id}} </td>
<td> <button ng-controller="ModalDemoCtrl" type="button" ng-click="viewItem(item)" class="btn btn-primary">View Item</button> </td>

和我的模态 html 页面:

<div class="modal-header">
  <h3>{{Title }}</h3>
</div>
<div class="modal-body">
  <p>{{ Id }}</p>
</div>
<div class="modal-footer">
  <button class="btn btn-primary" ng-click="ok()">OK</button>
  <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

只够看我们能否得到我们的两个值。

但我不知道我的 modalController 应该是什么样子，我似乎无法将整个项目(目前只有标题和 ID)传递给模态视图。

在制作我的 Controller 时，我遵循了 Angular Bootstrap github 页面上的示例:

angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {

$scope.viewItem = function () {

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

modalInstance.result.then(function (selectedItem) {
  $scope.selected = selectedItem;
}, function () {
  $log.info('Modal dismissed at: ' + new Date());
});
};

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

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

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

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

我知道这行不通，我现在无法输入我的实际 Controller ，我将在今晚晚些时候更新它。关于如何实现这一点有什么想法吗？

Answer 1

如果我理解正确，你不需要将整个项目列表传递给你的模式，你应该只传递用户点击的项目。这实际上是作为参数传递给您的 viewItem 函数的项目，因此您会得到如下内容:

$scope.viewItem = function (selectedItem) {
  var modalInstance = $modal.open({
    templateUrl: 'myModalContent.html',
    controller: 'ModalInstanceCtrl',
    resolve: {
      item: function () {
        return selectedItem;
      }
    }
  });
}

然后在你的模态 Controller 中:

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, item) {
  $scope.title = item.title;
  $scope.id = item.id
});

或者您可以将传递给模态 Controller 的项目分配给 $scope.item 变量并使用 {{item.title}} 和 {{item.id}} 改为在您的 HTML 中。