Question

我曾经将我的所有代码放在一个大的js文件中，但我将所有内容分开 - 包括控制器使其模块化，因为我的小应用程序增长（以及用于学习porpoises）。所以我的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

您错过了$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 2

对我来说是一个简单的错误。更改了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 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');
    };
}]);

错误：[ng：areq]参数'ModalController'不是函数，未定义

3 个答案: