エラー：[ng：areq]引数 'ModalController'は関数ではなく、定義されていません

Question

私はすべてのコードを1つの大きなjsファイルに入れていましたが、私の小さなコード成長する（そして、ポルポイズを学ぶために）。私のui-bootstrapモーダルコードはこのコントローラにあり、うまく動作しています。コントローラを別々のファイルに分割すると、以下のエラーが表示されます。どうすれば修正できますか？

app.js

var personApp = angular.module('PersonApp', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']); 

personController.js

personApp.controller('PersonController', function ($scope, $uibModal, PersonService) { 
    $scope.addPerson = function() { 
     $scope.modalModel = { 
      Id: 0, 
      firstName: '', 
      lastName: '', 
      birthDate: '' 
     }; 
     $scope.$uibModalInstance = $uibModal.open({ 
      templateUrl: '/Modal/AddEditPersonModal', 
      controller: 'ModalController', 
      scope: $scope 
     }) 
    } 

personModalController.js

personApp.controller('ModalController', ['$scope', function ($scope, $uibModalInstance) { 
    $scope.close = function() { 
     $scope.$uibModalInstance.close(); 
     var modalId = $scope.modalModel.Id; 
     for (var i = 0; i < $scope.persons.length; i++) { 
      var person = $scope.persons[i]; 
      if (person.Id === $scope.oldValues.Id) { 
       $scope.persons[i].firstName = $scope.oldValues.firstName; 
       $scope.persons[i].lastName = $scope.oldValues.lastName; 
       $scope.persons[i].birthDate = $scope.oldValues.birthDate; 
       break; 
      } 
     }; 
    }; 

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

Index.cshtml

@{ 
    ViewBag.Title = "Home Page"; 
} 

<link href="~/Content/PageSpecific/Index.css" rel="stylesheet" /> 
<script src="~/Scripts/PersonApp/app.js"></script> 
<script src="~/Scripts/PersonApp/filters/personFilter.js"></script> 
<script src="~/Scripts/PersonApp/services/personService.js"></script> 
<script src="~/Scripts/PersonApp/controllers/personController.js"></script> 
<script src="~/Scripts/PersonApp/controllers/personModalController.js"></script> 
<script src="~/Scripts/PageSpecific/Index.js"></script> 


<div ng-app="PersonApp" class="container"> 
    <div ng-controller="PersonController"> 
     <div class="mb20 mt15"> 
      <input type="text" placeholder="Search Person" ng-model="searchPerson" /> 
      <button type="button" class="btn btn-primary pull-right mb15 mr20" data-toggle="modal" ng-model="addPersonModel" ng-click="addPerson()">Add New</button> 
     </div> 

     <table class="table header-fixed"> 
      <thead> 
       <tr> 
        <th ng-click="sortData('Id')"> 
         ID <div ng-class="getSortClass('Id')"></div> 
        </th> 
        <th ng-click="sortData('firstName')"> 
         First Name <div ng-class="getSortClass('firstName')"></div> 
        </th> 
        <th ng-click="sortData('lastName')"> 
         Last Name <div ng-class="getSortClass('lastName')"></div> 
        </th> 
        <th ng-click="sortData('birthDate')"> 
         BirthDate <div ng-class="getSortClass('birthDate')"></div> 
        </th> 
        <th>Actions</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="person in filteredPersons | orderBy: sortColumn:reverseSort | filter : searchPerson"> 
        <td>{{person.Id}}</td> 
        <td>{{person.firstName}}</td> 
        <td>{{person.lastName}}</td> 
        <td>{{person.birthDate | date:"MM/dd/yyyy"}}</td> 
        <td> 
         <a href="" data-toggle="icon-tooltip" data-placement="bottom" title="Edit Record" ng-model="editPersonModel" ng-click="editPerson(person)"><span class="fa fa-pencil-square-o"></span></a> 
         <a href="" data-toggle="icon-tooltip" data-placement="bottom" title="Remove Record" ng-model="removePersonModel" ng-click="removePersonDialog(person)"><span class="fa fa-remove"></span></a> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
     <ul uib-pagination total-items="persons.length" ng-model="currentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" items-per-page="numPerPage" num-pages="numPages"></ul> 
     <pre>Page: {{currentPage}}/{{numPages}}</pre> 
    </div> 
</div> 
<style> 
</style> 

Answer 1

私の一部では単純な間違いでした。 index.cshtmlで参照ファイルの順序を変更しました。 personControllerは（personmodalcontroller中）modalcontrollerを呼び出そうと機能を持っていた

この：

<script src="~/Scripts/PersonApp/controllers/personController.js"></script> 
<script src="~/Scripts/PersonApp/controllers/personModalController.js"></script> 

このなった：あなたはスクリプトで `personModalController.js`を追加したが、あなたのファイル名が` modalControllerある

<script src="~/Scripts/PersonApp/controllers/personModalController.js"></script> 
<script src="~/Scripts/PersonApp/controllers/personController.js"></script> 

Answer 2

あなたは再このようModalControllerを定義し、含まれるように$uibModalInstance

personApp.controller('ModalController', ['$scope' function ($scope, $uibModalInstance) { 
    $scope.close = function() { 
     $scope.$uibModalInstance.close(); 
     var modalId = $scope.modalModel.Id; 
     for (var i = 0; i < $scope.persons.length; i++) { 
      var person = $scope.persons[i]; 
      if (person.Id === $scope.oldValues.Id) { 
       $scope.persons[i].firstName = $scope.oldValues.firstName; 
       $scope.persons[i].lastName = $scope.oldValues.lastName; 
       $scope.persons[i].birthDate = $scope.oldValues.birthDate; 
       break; 
      } 
     }; 
    }; 

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

Answer 3

を逃しました。コントローラに$uibModalInstance依存関係を注入していません。関数のパラメータ内の$uibModalInstanceは、依存関係のエイリアス参照のみです。依存関係をエイリアシングする前にまず依存関係を注入する必要があります。

personApp.controller('ModalController', ['$scope', '$uibModalInstance', function ($scope, $uibModalInstance) { 
    $scope.close = function() { 
     $scope.$uibModalInstance.close(); 
     var modalId = $scope.modalModel.Id; 
     for (var i = 0; i < $scope.persons.length; i++) { 
      var person = $scope.persons[i]; 
      if (person.Id === $scope.oldValues.Id) { 
       $scope.persons[i].firstName = $scope.oldValues.firstName; 
       $scope.persons[i].lastName = $scope.oldValues.lastName; 
       $scope.persons[i].birthDate = $scope.oldValues.birthDate; 
       break; 
      } 
     }; 
    }; 

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