AngularJS - ngClickが機能しない/ getAll（）関数が定義されていません

私はAngularを初めて使うと考えています。私は異なるアプローチとコードを試してきましたAngularJS - ngClickが機能しない/ getAll（）関数が定義されていません

私はWEBapiを通してデータベースからデータを取得/追加する単純なビューを持っています。

3質問：

1 /どのように来るIEは、ここでは表示するデータを渡していないのですか？ 2/SUBMITが動作しないことをChromeに考慮するにはどうすればよいですか？ 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という関数を呼び出そうとしています。あなたは$scopeプリフィックスの有無にかかわらず、それを呼び出すことができます

getAll(); 

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

この方法：代わりにこれを行います。

はまた、これは間違っている：

var saveParcel = APIService.saveParcel(parcel); 

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

コールバックパラメータの1つとして$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（）関数が定義されていません

答えて

関連する問題