錯誤：[ng：areq]參數'ModalController'不是函數，但未定義

Question

我曾經把所有的代碼放在一個大的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不得不函數試圖調用modalcontroller（在personmodalcontroller）

此：

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

成爲本：

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

Answer 2

你錯過了包括$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

重新定義ModalController這樣。您沒有在您的控制器中注入$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'); 
    }; 
}]);