将$ 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作为普通视图(via $routeProvider和ng-viewdirective)调用时,它会抛出错误,即:

    .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

我解决了这个问题:

1. $uibModalInstance从中移除了注射剂fooController

2. 在调用模态时,我将modalInstance作为变量传递给模态的范围:

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

3. 使用范围变量关闭模态:

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

这是原始plunkr的一个分支,有这个解决方案:https://plnkr.co/edit/ZasHQhl6M5cCc9yaZTd5