将 $uibModalInstance 注入不是由 $uibModal 启动的控制器

Question

我有这两个观点：

1) foo.html

  <p>Hello {{name}}</p>

2) foo-as-modal.html

<div class="modal-header">
    <h3 class="modal-title">I'm a modal</h3>
</div>
<div class="modal-body">
    <ng-include src="'foo.html'"></ng-include>
</div>
<div class="modal-footer">
    <button class="btn btn-default" ng-click="cancel()">Close</button>
</div>

foo.html 的控制器是 fooController:

angular.module('myApp').controller('fooController', ['$scope','$uibModalInstance', function($scope,$uibModalInstance) {

     $scope.name = "John"

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

我需要将 $uibModalInstance 注入 fooController 以使 .dismiss 工作

当我调用 foo-as-modal.html 作为模态时效果很好，即：

    var modalInstance = $uibModal.open({
        templateUrl: 'foo-as-modal.html',
        controller: 'fooController',
        scope: $scope.$new(),
        size: 'lg'
    });

但是当我调用 foo.html 作为普通视图时它会抛出错误（通过 $routeProvider 和 ng-view 指令），即：

    .when('/foo', {
        templateUrl: 'foo.html',
        controller: 'fooController'
    })

错误是：

 Error: [$injector:unpr] Unknown provider: $uibModalInstanceProvider <- $uibModalInstance <- fooController

并且视图不显示"John"（因为错误）

我该如何解决这个问题？我真的需要重用 foo.html 和 fooController 作为模态和非模态，因为它们有很多东西（我在这里简化了）

编辑：这是一个 plunkr:

https://plnkr.co/edit/9rfHtE0PHXPhC5Kcyb7P

Answer 1

您不能对页面视图和模式使用相同的控制器window。至少，直到控制器依赖于 $uibModalInstance.

$uibModalInstance只能在模态中注入。

Answer 2

我是这样解决的：

从 fooController

$uibModalInstance

调用模态时，我将 modalInstance 作为变量传递给模态的范围：

var modalScope = $scope.$new();

var modalInstance = $uibModal.open({
    templateUrl: 'foo-as-modal.html',
    controller: 'fooController',
    scope: modalScope
});

modalScope.modalInstance = modalInstance;

关闭具有范围变量的模态：

$scope.modalInstance.dismiss('cancel');  // instead of $uibModalInstance.dismiss(..)

这是原始 plunkr 的一个分支，具有以下解决方案：https://plnkr.co/edit/ZasHQhl6M5cCc9yaZTd5

Answer 3

实现此目的的一种方法是将路由中的 $uibModalInstance 解析为 null（或空的 string/or，随你喜欢）并将其注入控制器。如果 html 页面未作为模式打开，您仍然有 $uibModalInstance。如果它作为模式打开，$uibModalInstance 会自动注入。

将 $uibModalInstance 注入不是由 $uibModal 启动的控制器

Inject $uibModalInstance to a controllar not initiated by a $uibModal

angularjs

angular-ui-bootstrap

angular-ui-modal