AngularJS - ngClick不起作用/ getAll()函数未定义

时间:2017-05-05 21:50:57

标签: javascript angularjs asp.net-web-api

考虑一下我是Angular的新手,这给了我一个艰难的时刻。我一直在尝试不同的方法和代码

所以我有一个简单的视图,通过WEBapi从数据库获取/添加数据。

3个问题:

1 /为什么IE没有传递数据来查看? 2 /考虑到CHROME SUBMIT不起作用,我做错了什么? 3 /这两种浏览器的最佳方法是什么?

我无法弄清楚出了什么问题。 Chrome控制台找不到错误,但ngclick不提交表单。

enter image description here

另一方面,IE不显示列表中的数据,并在控制台中显示错误。

enter image description here

至于WEBapi被认为是可行的(通过浏览器和提琴手测试)。

的index.html

@{    Layout = null; }
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>MobilePostService Client Application</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/Scripts/angular.min.js")
    @Scripts.Render("~/Scripts/angular-route.min.js")
    @Scripts.Render("~/Scripts/angular-resource.min.js")
    @Scripts.Render("~/Scripts/App/module.js")
    @Scripts.Render("~/Scripts/App/controller.js")
    @Scripts.Render("~/Scripts/App/service.js")



    <style>
        table, tr, td, th {
            border: 1px solid #ccc;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>



<body ng-app="APIModule" ng-controller="APIController">
    <div class="row">
        <div class="col-md-7">
            <table>
                <tr>
                    <th>NAME</th>
                    <th>CITY</th>
                    <th>STREET</th>
                    <th>POSTAL CODE</th>
                    <th>PHONE NR</th>
                    <th>EMAIL</th>
                    <th>REGISTRATION DATE</th>




                </tr>
                <tbody data-ng-repeat="par in parcel">
                    <tr>
                        <td>{{par.Name}}</td>
                        <td>{{par.City}}</td>
                        <td>{{par.Street}}</td>
                        <td>{{par.PostalCode}}</td>
                        <td>{{par.Phone}}</td>
                        <td>{{par.Email}}</td>
                        <td>{{par.RegistrationDate}}</td>
                    </tr>
                </tbody>
            </table>
            @*<br /> <input type="button" ng-click="/new" value="Nowa paczka" />*@
            @*<a href="/">NOWA PACZKA</a>*@
        </div>
        <div class="col-md-4">
          <form ng-submit="addParcel()">
              <table>
                  <tr>      <td>Name</td>      <td colspan=2><input type="text" ng-model="Name" /></td>    </tr>
                  <tr>      <td>City</td>      <td colspan=2><input type="text" ng-model="City" /></td>    </tr>
                  <tr>      <td>Street</td>     <td colspan=2><input type="text" ng-model="Street" /></td>    </tr>
                  <tr>      <td>PostalCode</td> <td colspan=2><input type="text" ng-model="PostalCode" /></td>    </tr>
                  <tr>      <td>Phone</td>      <td colspan=2><input type="text" ng-model="Phone" /></td>    </tr>
                  <tr>      <td>Email</td>      <td colspan=2><input type="text" ng-model="Email" /></td>    </tr>
                  <!--<tr>      <td>RegistrationDate</td>      <td colspan=2><input type="text" ng-model="parcel.RegistrationDate" /></td>    </tr>-->
                  @*<tr>      <td>Submit</td>      <td colspan=2><input type="click" id="submit" value="Submit"/></td>    </tr>*@

              </table>
              <input type="submit" id="submit" value="Submit">
          </form>



        </div>
    </div>




</body>
</html>

module.js(在这里推送其他.js的所有代码)

var app;
(function () {
    app = angular.module("APIModule", []);

    app.service("APIService", function ($http) {

        this.getParcels = function () {


            //nalezt zmienic urlBase na biezacy z wyszukiwarki
            var urlBase = 'http://localhost:1797/api';
            return $http.get(urlBase + '/webapi');
        }

        this.saveParcel = function (par) {
            var urlBase = 'http://localhost:1797/api';
            return $http.post(urlBase + '/webapi', par);
        }
    });
    app.controller("APIController", function ($scope, APIService) {


        getAll();

        $scope.getAll = function () {
            var servCall = APIService.getParcels();

            servCall.then(function (d) {
                $scope.parcel = d.data;
            });
        };

        $scope.addParcel = function () {

            var parcel = {
                Name: $scope.Name,
                PostalCode: $scope.PostalCode,
                City: $scope.City,
                Phone: $scope.Phone,
                Email: $scope.Email,
                Street: $scope.Street,
                RegistrationDate: new Date()
            };

            var saveParcel = APIService.saveParcel(parcel);

            saveParcel.then(function (d, $scope) {
                //tutaj zwracam 
                $scope.getAll();
            });
        };


    });

})();

0 个答案:

没有答案