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

passing objects to modal dialog in AngularJS/bootstrap

本文关键字：对象 模态 对话框 AngularJS bootstrap      更新时间：2023-09-26

我试图通过一个对象到一个模态对话框在bootstrap/angularJS使用下面的代码。我这样做的风格在AngularJS UI引导模态是无法从作用域执行函数给出的答案。当模态表单应该从调用editGroup()打开时，我得到以下错误:

错误:[$injector:unpr]未知提供商:selGroupProvider <- selGroup

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;
                }
            }
        });
    };

这个错误的官方描述在这里;然而，我不明白为什么我收到这个错误。如有任何帮助，将不胜感激。

  1. 你的控制器的依赖项列表与控制器的功能定义不匹配:在$modal.open中你列出了六个依赖项，而在功能中只有三个存在。
  2. 依赖项由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 () {

你应该在解析中将变量命名为'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 =预览

相关文章：