Angular bootstrap 模态控制器范围

Question

我正在尝试让模态与 angular bootstrap 一起工作。我可以很好地启动模态，但我在关闭模态时遇到了一些范围问题。

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

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

我可以通过将 return 对象存储在 $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每当使用控制器时实例化一个控制器的新实例，对于modal也是一样的。因此，当您指定 controller: 'MainCtrl' 时，您是在告诉 angular 您想要为您的模式实例化其中一个，这很少是您想要的。

相反，您应该为对话框创建一个单独的控制器，它可以 return 使用 $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);
  };
});

Angular bootstrap 模态控制器范围

Angular bootstrap modal controller scope

angularjs

angular-bootstrap