AngularJS - ngClick不工作/ getAll（）函数undefined

问题描述：

考虑我是Angular的新手，这给了我一段艰难的时光。我一直在尝试不同的方法和代码从AngularJS - ngClick不工作/ getAll（）函数undefined

所以我有简单的观点，通过WEBAPI获取/添加数据库中的数据。

3个问题：

1 /如何IE浏览器不传递数据在这里查看？ 2 /考虑到CHROME，SUBMIT不起作用，我该怎么做？ 3 /在这里最好的方法是让它在两个浏览器上都能正常工作？

我无法弄清楚什么是错的。 Chrome控制台找不到错误，但ngclick不提交表单。

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

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


    }); 

})();

答

getAll肯定是不确定的。您正在从您的控制器调用它，但不会在$scope前添加它。所以你正试图在不存在的全局命名空间中调用一个名为getAll的函数。做到这一点，而不是：

getAll(); 

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

这样你就可以带或不带$scope前缀调用它。

而且这是错误的：

var saveParcel = APIService.saveParcel(parcel); 

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

没有理由有$scope作为回调的参数之一。通过这样做，您将覆盖控制器的$scope变量。由于此回调参数没有方法getAll，您将再次得到未定义的错误。您并不需要d变量。那么为什么要包括它？它应该是这样的：

var saveParcel = APIService.saveParcel(parcel); 

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

非常感谢你的答案！完美工作:)也许你有一些教程或材料记住解释最好的$范围？ –

AngularJS - ngClick不工作/ getAll（）函数undefined

相关推荐