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


    }); 

})();

來源

2017-05-05 Aleksander Dudek

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

來源

2017-05-05 21:58:18

非常感謝你的答案！完美工作:)也許你有一些教程或材料記住解釋最好的$範圍？ –

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

回答

相關問題