角引导模态控制器范围

Question

我正在尝试使用 angular bootstrap 来获取模态框。我可以很好地启动模态，但我在解除模态时遇到了一些范围问题。

当我启动模式时，我可以指定一个控制器，我可以从中调用函数，它可以工作，但它似乎是控制器的 副本，没有 $parent 并且没有任何控制器 -局部变量。

我需要访问 $uibModal.open() 的返回值才能关闭模式，所以我试图将它存储在 var modalInstance 中，当我在控制器范围内时它工作正常，但是传递给 $uibModal 服务的控制器副本没有设置局部变量 modalInstance。

我可以通过将返回对象存储在 $rootScope 中来解决这个问题，但这似乎是个坏主意。我错了吗？从传递给 $uibModal 服务的点击处理程序访问 modalInstance 的最佳方法是什么？我可以避免使用 $rootScope 吗？

var app = angular.module('main', ['ui.bootstrap']);

app.controller('MainCtrl', function($scope, $rootScope, $uibModal) {
  var modalInstance;

  $scope.launch = function() {
    console.log('launch');
    modalInstance = $uibModal.open({
      template: '<div>Modal Content - <a ng-click="close()">Close</a></div>',
      controller: 'MainCtrl',
    });

    // Wouldn't need to do this if I could access modalInstance in close handler
    $rootScope.modalInstance = modalInstance;
  }

  $scope.close = function () {
    console.log('close');
    console.log(modalInstance);

    // Works, but should I be using $rootScope like this?
    //$rootScope.modalInstance.close();

    // Doesn't work, modalInstance is undefined
    modalInstance.close();
  }
});

Answer 1

Angular 在每次使用时都会实例化一个新的控制器实例，模态也是如此。因此，当您指定控制器：'MainCtrl' 时，您是在告诉 Angular，您想为您的模态实例化其中之一，而这很少是您想要的。

相反，您应该为对话框创建一个单独的控制器，它可以在使用 $uibModalInstance 服务关闭时返回值。

var app = angular.module('main', ['ui.bootstrap']);

app.controller('MainCtrl', function($scope, $rootScope, $uibModal) {
  var modalInstance;

  $scope.launch = function() {
    console.log('launch');
    modalInstance = $uibModal.open({
      template: '<div>Modal Content - <a ng-click="close()">Close</a></div>',
      controller: 'DialogCtrl',
    });
    ....

  }

});

app.controller('DialogCtrl', function($scope, $uibModalInstance) {
  $scope.theThingIWantToSave = [];
  $scope.cancel = function () {
    $uibModalInstance.close($scope.theThingIWantToSave);
  };
});