未能在AngularJS中爲局部視圖注入控制器

Question

我想創建彈出式模式，爲此我的控制器必須依賴於另一個控制器。

下面是我的主要控制器文件，名爲product.js來定義模態實例。我採用了棱角分明的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'); 
    }; 

});