角度ng-showが関数と同期していません

Question

ng-showでは、完全に無視されているように、関数と全く同期していないというこのフラストレーションの問題があります。 true/falseを返すコントローラの関数に基づいてng-repeat要素にbuttonを表示しようとしています。コントローラで

機能コード：

$scope.isRated = function(reservation){ 

      var reservationID = reservation.id; 
      var guestEmail = $rootScope.USER.email; 
      var json = JSON.stringify({ 
       "reservationID": reservationID, 
       "guestEmail": guestEmail.toString(), 
       "venueRating": $scope.foodRating, 
       "restaurantRating":$scope.restaurantRating, 
       "serviceRating":$scope.serviceRating 
      }); 
      var url = "http://localhost:9900/api/reservation/isRated"; 

      $.ajax(
       { 
        type: 'POST', 
        url: url, 
        contentType: "application/json", 
        data : json, 
        success: function (response) { 
         // alert(response + " " + reservationID); 

         return response; 

        }, 
        error: function (err) { 
         console.log(err); 
        } 

       } 

      ); 

、それが発生したHTMLのdiv：

<p>{{USER.name}}</p> 
<div class="row" ng-init="loadData()"> 
    <div class="col-md-4"> 
     <label>Passed reservations</label><br/> 
     <div ng-repeat="x in restaurantHistory track by x.id"> 
      {{x.id}} {{x.restaurant.name}} <button ng-show="isRated(x)" ng-click="rateReservation(x)" class="btn btn-link">Rate</button> 
      <hr> 
     </div> 
     <hr> 
     <a href="#advanced">Advanced settings</a> 
     <br/> 
    </div> 

</div> 

機能が、正しく動作したかったようブール値を返しますが、私はちょうどに管理することはできませんそれをhtmlのbutton要素と接続する方法を見つけてください。私は他の質問で見つけることができたすべてを試しましたが、これまで運がなかったのです。報告されたエラーはありません。それは正常に動作しません。

Answer 1

isRatedは非同期関数です。これはすぐに完了しないhttp要求を行います。そのため、successコールバックが存在します。しかし、isRated関数自体はすぐに戻り、戻り値がないのでundefinedを返します。だからng-showはundefinedと表示され、要素は表示されません。

各予約はisRatedプロパティを持つことができます。また、ng-showので、あなたにもloadingInitiatedプロパティをすることができ、$scope.isRated何度も呼び出されますので、あなたは、AJAXの応答をキャッシュし、あなたは一度だけAJAX要求を行うことを確認することができます

$scope.isRated = function(reservation) { 
    if (reservation.loadingInitiated) { 
     return reservation.isRated; 
    } 

    reservation.loadingInitiated = true; 

    $.ajax(
    { 
     // ... 
     success: function (response) { 
      reservation.isRated = // ... 
     } 
    } 
    ); 
} 

はまた、あなたは、おそらく使用する必要があることに注意してくださいAngularの$httpサービスは、jQueryの代わりにAJAX呼び出しを行うサービスです。このように応答が返ってくると、Angularは変更を受け取り、新しい値をビューにバインドすることが保証されます。また、あなたが好きであれば、そのサービスを使ってキャッシングを行うこともできます。

Answer 2

問題は、非同期呼び出しを使用していることです。それを動作させる1つの方法は、角度によって監視されているモデルを更新し、変更されたときにビューが更新されるようにすることです。

の1-

$scope.isRated = false; 

2-プロパティisRatedあなたのAJAX呼び出しを使用して、NG-ショーに

<button ng-show="isRated">Button</button> 

、3-アップデートを新しいプロパティを使用して、デフォルト値でスコープのプロパティを作成します。