AngularUI 模态自定义范围

Question

我想为我在我的项目中使用的模式定义一个自定义范围（出于某些原因我不想使用依赖注入），但是每当我在 $modal.open。这是我根据 AngularUI 网站上的示例创建的插件：http://plnkr.co/edit/rbtbpyqG7L39q1qYdHns

我尝试调试并看到 (modalOptions.scope || $rootScope) returns true 具有自定义范围，因为 true（显然）没有 $new()定义函数，抛出异常。

有什么想法吗？

Answer 1

您必须传递一个范围实例：

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

如果您不想使用控制器的作用域，您也可以传递自己的自定义作用域，工作 plnkr：

http://plnkr.co/edit/1GJTuVn45FgPC3jIgyHv?p=preview

Answer 2

第一种方式

要将变量传递给模态框，您可以采用这种方式

var modalInstance = $modal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        },
        test: function(){
          return  $scope.test;   //This is the way
        }
      }
    });

在你的模式中你有这个

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

  $scope.items = items;
  $scope.test = test;   // And here you have your variable in your modal

  console.log("Test: " + $scope.test)

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

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

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

这里有你自己的例子 Plunker

第二种方式

var modalInstance = $modal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      scope: $scope,    // In this way
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

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

  $scope.items = items;

  //You have available test and hello in modal
  console.log("Test 1: " + $scope.test);  
  console.log("Test 2: " + $scope.hello);

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

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

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

Plunker第二种方式

AngularUI 模态自定义范围

AngularUI modal custom scope

angularjs

angular-ui-bootstrap