在 AngularJS/bootstrap 中将对象传递给模态对话框答案

【问题标题】：passing objects to modal dialog in AngularJS/bootstrap在 AngularJS/bootstrap 中将对象传递给模态对话框
【发布时间】：2015-05-28 00:51:33
【问题描述】：

我正在尝试使用下面的代码将对象传递到 bootstrap/angularJS 中的模式对话框中。我以AngularJS UI Bootstrap modal is unable to perform functions from scope 给出的答案的方式做到了这一点。当模态表单应该通过调用 editGroup() 打开时，我收到以下错误：

错误：[$injector:unpr] 未知提供者：selGroupProvider

var EditGroupModalController = function ($scope, $modalInstance, selGroup) {        
        $scope.user = $sessionStorage.user;
        $scope.selGroup = selGroup;

        $scope.closeModal = function () {
            $modalInstance.close();
        };
    };

    $scope.editGroup = function (selGroup) { // "selGroup" receives the current Group object from $scope.groupList[]
        $modal.open({
            templateUrl: 'app/views/administration/advanced/editgroup.html',
            controller:  ['$scope', '$modalInstance','$modal','$sessionStorage','advancedService','selGroup', EditGroupModalController],
            size: 'lg',
            windowTemplateUrl:'app/views/partials/modaltemplatedraggable.html',
            backdrop:'static',
            resolve: {
                item: function () {
                    return selGroup;
                }
            }
        });
    };

这个错误的官方描述是here；但是，我不明白为什么会收到此错误。 非常感谢对此的任何帮助。

【问题讨论】：

标签： javascript angularjs twitter-bootstrap angular-ui-bootstrap

【解决方案1】：

您的控制器的依赖项列表与控制器的函数定义不匹配：在$modal.open 中，您列出了六个依赖项，而在函数中只存在三个。
依赖项由resolve 键注入 - 在您的情况下，键是item。

对您的代码进行必要的更改以使其正常工作：

替换 (1)

var EditGroupModalController = function ($scope, $modalInstance, selGroup)

与

var EditGroupModalController = function ($scope, $modalInstance, $modal, $sessionStorage, advancedService, selGroup)

并替换 (2)

resolve: {
    item: function () {

有

resolve: {
    selGroup: function () {

【讨论】：

您的更正效果很好。也谢谢你的解释！

【解决方案2】：

您应该将解析中的变量命名为“selGroup”而不是“item”，以便正确注入。

此外，声明的依赖项的名称应与函数定义匹配。我整理了这个简单的演示。

angular.module('test', ['ui.bootstrap']).controller('TestController', function($scope, $modal) {
  var sel = {name: "A group"};
  var EditGroupModalController = function($scope, $modalInstance, selGroup) {
    $scope.selGroup = selGroup;
    $scope.closeModal = function() {
      $modalInstance.close();
    };
  };

  $scope.editGroup = function(selGroup) { // "selGroup" receives the current Group object from $scope.groupList[]
    $modal.open({
      template: '<div>Test {{selGroup.name}}</div>',
      controller: ['$scope', '$modalInstance', 'selGroup', EditGroupModalController],
      size: 'lg',
      backdrop: 'static',
      resolve: {
        selGroup: function() {
          return sel;
        }
      }
    });
  };
});

http://plnkr.co/edit/ec1PjkDZtf4yqINONnX5?p=preview

【讨论】：