angularJS 将 object 属性传递给模态

Question

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

$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）传递给模态视图。

我在制作控制器时遵循了 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');
};
});

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

Answer 1

我认为你不需要创建另一个控制器，你可以使用你当前的。并使用指令 ng-show 或 ng-if 显示模态 window。没有必要为一个视图使用两个控制器。一个控制器 - 一个视图。

如果您想创建模态 window 并在项目的不同部分使用它，您可以创建指令并使用它来创建模态 windows 您的应用程序。

Answer 2

在创建 Items 函数时，我会传递一个对象，这样您就可以在模态 ctrl 中调用它，如下所示：

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 myItems: $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.myItems;
$scope.selected = {
item: $scope.items[0]
};

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

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

我让它在我的应用程序中像这样工作。希望对你有帮助

Answer 3

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

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

然后在你的模态控制器中：

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

或者您可以将传递给模态控制器的项目分配给 $scope.item 变量，然后在 HTML 中使用 {{item.title}} 和 {{item.id}}。

angularJS 将 object 属性传递给模态

angularJS pass object attributes to modal

javascript

angularjs

angular-ui-bootstrap