无法在AngularJS中为局部视图注入Controller

Question

我想创建弹出模式，我的控制器必须依赖于另一个控制器。

以下是我的名为product.js的主控制器文件，用于定义模式实例。 我正在使用angular-UI的帮助

    var myStoreControllers=angular.module("myStoreController",['ui.bootstrap','myStoreModalController']);

    myStoreControllers.controller('myStoreProductCtrl',function($scope,$modal,$log,ModalInstanceCtrl){

     $scope.message="Checking routing 123";


     $scope.items = ['item1', 'item2', 'item3'];

      $scope.open = function (size) {

        var modalInstance = $modal.open({
          templateUrl: 'assets/app/views/myModalContent.html',
          controller: ModalInstanceCtrl,
          size: size,
          resolve: {
            items: function () {
              return $scope.items;
            }
          }
        });

        modalInstance.result.then(function (selectedItem) {
          $scope.selected = selectedItem;
        }, function () {
          $log.info('Modal dismissed at: ' + new Date());
        });
      };


    });


Below is my controller definition for the view.

var myStoreModalController=angular.module("myStoreModalController",[]);

myStoreModalController.controller('ModalInstanceCtrl',function($scope, $modalInstance, items){

  $scope.items = items;
  $scope.selected = {
    item: $scope.items[2]
  };

  $scope.ok = function () {
    $modalInstance.close($scope.selected.item);
  };

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

});

这总是给我错误：

Error: [$injector:unpr] Unknown provider: ModalInstanceCtrlProvider <- ModalInstanceCtrl

我无法理解为什么此依赖项注入失败。

Answer 1

我按照Cory建议进行了更改，并且效果很好。

精炼代码如下：

 var myStoreControllers=angular.module("myStoreController",['ui.bootstrap','myStoreModalController']);

    myStoreControllers.controller('myStoreProductCtrl',function($scope,$modal,$log,ModalInstanceCtrl){

     $scope.message="Checking routing 123";


     $scope.items = ['item1', 'item2', 'item3'];

      $scope.open = function (size) {

        var modalInstance = $modal.open({
          templateUrl: 'assets/app/views/myModalContent.html',
          controller: 'ModalInstanceCtrl',
          size: size,
          resolve: {
            items: function () {
              return $scope.items;
            }
          }
        });

        modalInstance.result.then(function (selectedItem) {
          $scope.selected = selectedItem;
        }, function () {
          $log.info('Modal dismissed at: ' + new Date());
        });
      };


    });


Below is my controller definition for the view.

var myStoreModalController=angular.module("myStoreModalController",[]);

myStoreModalController.controller('ModalInstanceCtrl',function($scope, $modalInstance, items){

  $scope.items = items;
  $scope.selected = {
    item: $scope.items[2]
  };

  $scope.ok = function () {
    $modalInstance.close($scope.selected.item);
  };

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

});