無法在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');
  };

});