Question

我正在尝试使用角度引导来获取模态。我可以很好地启动模态，但我有一些范围问题解雇模态。

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

我需要访问$ 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'时，你要告诉你想要为你的模态实例化其中一个，这很少是你想要的。

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

角度自举模态控制器范围

1 个答案: