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

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

转载作者：行者123 更新时间：2023-12-01 03:41:59

24

4

考虑到我是 Angular 的新手，这让我度过了一段艰难的时光。我一直在尝试不同的方法和代码

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

3个问题:

1/为什么IE不传递数据到这里查看？2/考虑到 CHROME 提交不起作用，我做错了什么？3/使其在两种浏览器上都能工作的最佳方法是什么？

我不知道出了什么问题。 Chrome 控制台未发现错误，但 ngclick 未提交表单。

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

就 WEBapi 而言，它被认为是有效的(通过浏览器和 fiddler 进行了测试)。

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();
            });
        };


    });

})();

最佳答案

getAll 肯定是未定义的。您从 Controller 调用它，但不添加 $scope 前缀。因此，您尝试在不存在的全局命名空间中调用名为 getAll 的函数。改为这样做:

getAll();

$scope.getAll = getAll;
function getAll() {
  ...
}

这样您就可以使用或不使用 $scope 前缀来调用它。

这也是错误的:

var saveParcel = APIService.saveParcel(parcel);

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

没有理由将 $scope 作为回调参数之一。通过这样做，您将覆盖 Controller 的 $scope 变量。由于此回调参数没有方法getAll，因此您将再次收到未定义的错误。您实际上也不需要 d 变量。那么为什么要包括它呢？应该是这样的:

var saveParcel = APIService.saveParcel(parcel);

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

关于javascript - AngularJS - ngClick 不起作用/getAll() 函数未定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43814227/

24

4

0

文章推荐： python - OS X 10.11 上的 Sleepwatcher 在唤醒时不执行脚本

文章推荐： python - 如何在 osx 上配置 browsermob 的代理上游？

文章推荐： jquery toggleClass 选择所有列表项而不是一个

详解C语言sscanf()函数、vsscanf()函数、vscanf()函数
C语言sscanf()函数：从字符串中读取指定格式的数据头文件： ?
php - 如何解释at()函数； substr()函数;伪代码中的exist()函数
最近，我有一个关于工作预评估的问题，即使查询了每个功能的工作原理，我也不知道如何解决。这是一个伪代码。下面是一个名为foo()的函数，该函数将被传递一个值并返回一个值。如果将以下值传递给foo函数，
VBS教程：函数-CStr 函数
CStr 函数返回表达式，该表达式已被转换为 String 子类型的 Variant。 CStr(expression) expression 参数是任意有效的表达式。说明通常，可以
VBS教程：函数-CSng 函数
CSng 函数返回表达式，该表达式已被转换为 Single 子类型的 Variant。 CSng(expression) expression 参数是任意有效的表达式。说明通常，可
VBS教程：函数-CreateObject 函数
CreateObject 函数创建并返回对 Automation 对象的引用。 CreateObject(servername.typename [, location]) 参数 serv
VBS教程：函数-Cos 函数
Cos 函数返回某个角的余弦值。 Cos(number) number 参数可以是任何将某个角表示为弧度的有效数值表达式。说明 Cos 函数取某个角并返回直角三角形两边的比值。此比值是
VBS教程：函数-CLng 函数
CLng 函数返回表达式，此表达式已被转换为 Long 子类型的 Variant。 CLng(expression) expression 参数是任意有效的表达式。说明通常，您可以使
VBS教程：函数-CInt 函数
CInt 函数返回表达式，此表达式已被转换为 Integer 子类型的 Variant。 CInt(expression) expression 参数是任意有效的表达式。说明通常，可
VBS教程：函数-Chr 函数
Chr 函数返回与指定的 ANSI 字符代码相对应的字符。 Chr(charcode) charcode 参数是可以标识字符的数字。说明从 0 到 31 的数字表示标准的不可打印的
VBS教程：函数-CDbl 函数
CDbl 函数返回表达式，此表达式已被转换为 Double 子类型的 Variant。 CDbl(expression) expression 参数是任意有效的表达式。说明通常，您可
VBS教程：函数-CDate 函数
CDate 函数返回表达式，此表达式已被转换为 Date 子类型的 Variant。 CDate(date) date 参数是任意有效的日期表达式。说明 IsDate 函数用于判断 d
VBS教程：函数-CCur 函数
CCur 函数返回表达式，此表达式已被转换为 Currency 子类型的 Variant。 CCur(expression) expression 参数是任意有效的表达式。说明通常，
VBS教程：函数-CByte 函数
CByte 函数返回表达式，此表达式已被转换为 Byte 子类型的 Variant。 CByte(expression) expression 参数是任意有效的表达式。说明通常，可以
VBS教程：函数-CBool 函数
CBool 函数返回表达式，此表达式已转换为 Boolean 子类型的 Variant。 CBool(expression) expression 是任意有效的表达式。说明如果 ex
VBS教程：函数-Atn 函数
Atn 函数返回数值的反正切值。 Atn(number) number 参数可以是任意有效的数值表达式。说明 Atn 函数计算直角三角形两个边的比值 (number) 并返回对应角的弧
VBS教程：函数-Asc 函数
Asc 函数返回与字符串的第一个字母对应的 ANSI 字符代码。 Asc(string) string 参数是任意有效的字符串表达式。如果 string 参数未包含字符，则将发生运行时错误。
VBS教程：函数-Array 函数
Array 函数返回包含数组的 Variant。 Array(arglist) arglist 参数是赋给包含在 Variant 中的数组元素的值的列表（用逗号分隔）。如果没有指定此参数，则
VBS教程：函数-Abs 函数
Abs 函数返回数字的绝对值。 Abs(number) number 参数可以是任意有效的数值表达式。如果 number 包含 Null，则返回 Null；如果是未初始化变量，则返回 0。
VBS教程：函数-FormatPercent 函数
FormatPercent 函数返回表达式，此表达式已被格式化为尾随有 % 符号的百分比（乘以 100 ）。 FormatPercent(expression[,NumDigitsAfterD
VBS教程：函数-FormatNumber 函数
FormatNumber 函数返回表达式，此表达式已被格式化为数值。 FormatNumber( expression [,NumDigitsAfterDecimal [,Inc

首页

博学

6Ren·AI

商城

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