Question

我是Angular Js的新手。我收到此错误：contactController is not defined

我的示例代码如下：

HTML

    <!doctype html>
    <html ng-app>
      <head>
        <title>Contact Manager</title>


        <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

          <script src="controllers/contactController.js"></script>

      </head>
      <body>
      <div ng-app="app" ng-controller="ContactController">
        <form class="well">
            <label>Name</label>
            <input type="text" name="name" ng-model="newcontact.name" />
            <label>Email</label>
            <input type="text" name="email" ng-model="newcontact.email" />
            <label>Phone</label>
            <input type="text" name="phone" ng-model="newcontact.phone" />
            <br/>
            <input type="hidden" ng-model="newcontact.id" />
            <input type="button" value="Save" ng-click="saveContact()" class="btn btn-primary" />
        </form>
        <table class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Phone</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="contact in contacts">
                    <td>{{ contact.name }}</td>
                    <td>{{ contact.email }}</td>
                    <td>{{ contact.phone }}</td>
                    <td> <a href="javascript:void(0)" ng-click="edit(contact.id)">edit</a> | <a href="javascript:void(0)" ng-click="delete(contact.id)">delete</a>

                    </td>
                </tr>
            </tbody>
        </table>
    </div>

      </body>


    </html>

contactController.js

    //var module = angular.module('app', []);

    angular.module('app', []).service('ContactService', function () {
        //to create unique contact id
        var uid = 1;

        //contacts array to hold list of all contacts
        var contacts = [{
            id: 0,
            'name': 'Megha',
                'email': 'hello@gmail.com',
                'phone': '123-2343-44'
        }];

        //save method create a new contact if not already exists
        //else update the existing object
        this.save = function (contact) {
            if (contact.id == null) {
                //if this is new contact, add it in contacts array
                contact.id = uid++;
                contacts.push(contact);
            } else {
                //for existing contact, find this contact using id
                //and update it.
                for (i in contacts) {
                    if (contacts[i].id == contact.id) {
                        contacts[i] = contact;
                    }
                }
            }

        }

        //simply search contacts list for given id
        //and returns the contact object if found
        this.get = function (id) {
            for (i in contacts) {
                if (contacts[i].id == id) {
                    return contacts[i];
                }
            }

        }

        //iterate through contacts list and delete 
        //contact if found
        this.delete = function (id) {
            for (i in contacts) {
                if (contacts[i].id == id) {
                    contacts.splice(i, 1);
                }
            }
        }

        //simply returns the contacts list
        this.list = function () {
            return contacts;
        }
    });

    angular.module('app', []).controller('ContactController',['$scope', 'ContactService', function ContactController($scope, ContactService) {

        $scope.contacts = ContactService.list();

        $scope.saveContact = function () {
            ContactService.save($scope.newcontact);
            $scope.newcontact = {};
        }


        $scope.delete = function (id) {

            ContactService.delete(id);
            if ($scope.newcontact.id == id) $scope.newcontact = {};
        }


        $scope.edit = function (id) {
            $scope.newcontact = angular.copy(ContactService.get(id));
        }
    }])

Answer 1

您正在角度模块外定义控制器，更改以下行：

    //simply returns the contacts list
        this.list = function () {
            return contacts;
        }
    })
    // continue in the same module, define the controller
    .controller('ContactController',['$scope', 'ContactService', function ContactController($scope, ContactService) {
        $scope.contacts = ContactService.list();

Answer 2

电话：

angular.module('app', [])

将创建一个新模块（由依赖项列表参数[]引起）。所以你基本上创建了2个模块。
将创建控制器的第二个调用更改为：

angular.module('app').controller(....)

这将获得现有模块而不是创建新模块。

Answer 3

首先取消注释：

var app= angular.module('app', []);

更改控制器声明的行：

app.controller('ContactController',  function ($scope, ContactService)

对于服务

app.service('ContactService', function (){});

var app = angular.module('app', []);

    app.service('ContactService', function () {
        //to create unique contact id
        var uid = 1;

        //contacts array to hold list of all contacts
        var contacts = [{
            id: 0,
            'name': 'Megha',
                'email': 'hello@gmail.com',
                'phone': '123-2343-44'
        }];

        //save method create a new contact if not already exists
        //else update the existing object
        this.save = function (contact) {
            if (contact.id == null) {
                //if this is new contact, add it in contacts array
                contact.id = uid++;
                contacts.push(contact);
            } else {
                //for existing contact, find this contact using id
                //and update it.
                for (i in contacts) {
                    if (contacts[i].id == contact.id) {
                        contacts[i] = contact;
                    }
                }
            }

        };

        //simply search contacts list for given id
        //and returns the contact object if found
        this.get = function (id) {
            for (i in contacts) {
                if (contacts[i].id == id) {
                    return contacts[i];
                }
            }

        };

        //iterate through contacts list and delete 
        //contact if found
        this.delete = function (id) {
            for (i in contacts) {
                if (contacts[i].id == id) {
                    contacts.splice(i, 1);
                }
            }
        };

        //simply returns the contacts list
        this.list = function () {
            return contacts;
        };
    });

    app.controller('ContactController',  function ($scope, ContactService) {

        $scope.contacts = ContactService.list();

        $scope.saveContact = function () {
            ContactService.save($scope.newcontact);
            $scope.newcontact = {};
        };


        $scope.delete = function (id) {

            ContactService.delete(id);
            if ($scope.newcontact.id == id) $scope.newcontact = {};
        };


        $scope.edit = function (id) {
            $scope.newcontact = angular.copy(ContactService.get(id));
        };
    });

<html ng-app="app">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<script src="js/contactController.js"></script>

</head>
<body>
  <div  ng-controller="ContactController">
    <form class="well">
        <label>Name</label>
        <input type="text" name="name" ng-model="newcontact.name" />
        <label>Email</label>
        <input type="text" name="email" ng-model="newcontact.email" />
        <label>Phone</label>
        <input type="text" name="phone" ng-model="newcontact.phone" />
        <br/>
        <input type="hidden" ng-model="newcontact.id" />
        <input type="button" value="Save" ng-click="saveContact()" class="btn btn-primary" />
    </form>
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="contact in contacts">
                <td>{{ contact.name }}</td>
                <td>{{ contact.email }}</td>
                <td>{{ contact.phone }}</td>
                <td> <a href="javascript:void(0)" ng-click="edit(contact.id)">edit</a> | <a href="javascript:void(0)" ng-click="delete(contact.id)">delete</a>

                </td>
            </tr>
        </tbody>
    </table>
</div>

</body>


</html>

Answer 4

您应该删除第二次依赖项。依赖注入只需要第一次。

像：

angular.module('app', []).service('ContactService', function ()......

angular.module('app').controller('ContactController', .....

或者您可以使用：

var app = angular.module('app', []);
app.service('ContactService', function ()......
app.controller('ContactController', ....

控制器未定义角度js

4 个答案: