TypeError:在ASP.NET中触发AJAX请求时,undefined不是函数

时间:2014-12-25 18:54:54

标签: javascript asp.net ajax angularjs

我按照这个LINK上的教程在我的angularJS应用程序(CRUD操作)上创建了AJAX请求。编写完成后,我尝试执行AJAX请求(从数据库中获取所有数据)但是当我在我的应用程序中休息时,我收到了这个错误:

TypeError: undefined is not a function
    at new <anonymous> (http://localhost:49510/Scripts/application/controllers.js:4:15)

有人知道问题在哪里以及如何解决?

这是代码:

控制器:

app.controller('ContactsController', [
    '$scope', '$http', '$location', 'contactsService',
    function ($scope, $location, $http, contactsService) {
        $http.get('/contacts/').success(function (data) { //triggers error
            alert(data);
            $scope.contact = data;
            $scope.loading = false;
        })
        .error(function () {
            alert ("An Error has occured while loading contacts!");
           // $scope.loading = false;
        });
        $scope.editContact = function (id) {
            $location.path('/edit-contact/' + id);
        };

        $scope.displayContact = function (id) {
            $location.path('/display-contact/' + id);
        };


        $scope.showDetails = function (id) {
            var el = angular.element(document.getElementById('#ct-details-' + id));
            el.toggleClass('details-hidden');
        }

    }
]);

这里是contacts.html模板:

<div class="container view">
    <header>
        <h3>Contacts</h3>
    </header>

    <div>
        <a class="nav-pills hover" href="#/add-contact">Add Contact</a>
    </div>
    <br /><br />

    <div class="row">
        <ul class="span5" >
            <li class="nav-pills nav-stacked contact-row" data-ng-repeat="contact in contacts | orderBy:'firstName'">
                <span id="ct-details-{{contact.id}}" data-ng-click="displayContact(contact.id)" style="cursor:pointer;" class="contact-data details-hidden" href="" >
                    <span class="span3 contact-name" >{{contact.firstName + ' ' + contact.lastName}}
                        {{contact.emailAddress}}</span>
                </span>
                                     <button class="btn editContact" data-ng-click="deleteContact(contact.id)">Delete</button>

                     <button class="btn editContact" data-ng-click="editContact(contact.id)">Edit</button>

            </li>
        </ul>
    </div>
</div>

这里是index.cshtml文件:

<!DOCTYPE html>
<html ng-app="contactsManager">
<head>
    <title>Contacts</title>
</head>
<body>
    <div class="navbar navbar-top">
        <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
        <link href="~/Content/custom.css" rel="stylesheet" />

        <div class="navbar-inner">
            <div class="container">
                <h2>Contacts</h2>
            </div>
        </div>
    </div>
    <div ng-view class="example-animate-container"
         ng-animate="{enter: 'example-enter', leave: 'example-leave'}"></div>
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/angular-route.js"></script>
    <script src="~/Scripts/application/application.js"></script>
    <script src="~/Scripts/application/controllers.js"></script>
    <script src="~/Scripts/application/contactsService.js"></script>
</body>
</html>

1 个答案:

答案 0 :(得分:3)

控制器函数中的参数顺序必须与参数数组中的顺序匹配。

您混合了$http$location的订单。

将功能签名更改为

app.controller('ContactsController', [
    '$scope', '$http', '$location', 'contactsService',
    function ($scope, $http, $location, contactsService) {