AngularJsはAPI呼び出し後にページを更新する必要があります

私はangularjsアプリケーションを作成しています。要件は、ユーザーがログインするとユーザーのデータを表示することです。ユーザーが正常にログインすると、そのユーザーは次のビューにルーティングされます。私のアプリケーションはこの時点までうまく機能しています。次のビューが読み込まれると、ユーザーの既存のレコードを表示する必要があります。しかし、この時点で空白のページが表示され、データが返されているが、バインドされていないことがコンソールで明確にわかります。私は$ scope、$ scope、$ applyを使用しましたが、UI要素のスコープを呼び出そうとしましたが、それらはすべてダイジェストが既に進行中になっています。私は何をすべきか？リフレッシュするとページが読み込まれます。AngularJsはAPI呼び出し後にページを更新する必要があります

(function() { 
"use strict"; 

angular.module("app-newslist") 
    .controller("newsController", newsController); 

function newsController($http,$q,newsService,$scope,$timeout) 
{ 

    var vm = this; 
    $scope.$watch(vm); 
    vm.news = []; 
    vm.GetTopNews = function() { 
     console.log("Inside GetTopNews"); 
     newsService.GetNewsList(). 
     then(function (response) 
     { 
      angular.copy(response.data, vm.news); 
     }, function() { 
      alert("COULD NOT RETRIEVE NEWS LIST"); 
     }); 
    }; 
    var el = angular.element($('#HidNews')); 
    //el.$scope().$apply(); 
    //el.scope().$apply(); 
    var scpe = el.scope(); 
    scpe.$apply(vm.GetTopNews()); 
    //scpe.$apply(); 
}

}）（）;あなたがあなたのテンプレートでこれを結合している方法を示していない

出典

2016-04-29 Shalin

どのように 'UIでvm.news'を表示していますか？ – Kyle

を読み取るための

おかげで..私はあなたに良いアイデアを与えることを再作成してみました。

私は問題があなたの約束をあなたのnewsServiceから処理していると思います。 $q Promisesを見てください。 vm.newsは角度外の関数によって更新されています。 $ scopeを使用します。$はリフレッシュを強制します。

original fiddle is hereとa working example here

(function() { 
 
    "use strict"; 
 

 
    var app = angular.module("app-newslist", []) 
 
    .controller("newsController", newsController) 
 
    .service("newsService", newsService); 
 

 
    newsController.$inject = ['$http', 'newsService', '$scope'] 
 
    newsService.$inject = ['$timeout'] 
 

 
    angular.bootstrap(document, [app.name]); 
 

 
    function newsController($http, newsService, $scope) { 
 

 
    var vm = this; 
 
    vm.news = $scope.news = []; 
 
    vm.service = newsService; 
 

 
    console.warn(newsService) 
 

 
    vm.message = "Angular is Working!"; 
 

 
    vm.GetTopNews = function() { 
 
     console.log("Inside GetTopNews"); 
 

 
     newsService.GetNewsList(). 
 
     then(function(response) { 
 
     $scope.$apply(function() { 
 
      $scope.news.length > 0 ? $scope.news.length = 0 : null; 
 
      response.data.forEach(function(n) { 
 
      $scope.news.push(n) 
 
      }); 
 

 
      console.log("VM", vm); 
 
     }) 
 

 
     }, function() { 
 
     alert("COULD NOT RETRIEVE NEWS LIST"); 
 
     }); 
 
    }; 
 

 
    } 
 

 
    function newsService($timeout) { 
 
    return { 
 
     GetNewsList: function() { 
 
     return new Promise(function(res, rej) { 
 
      $timeout(function() { 
 
      console.log("Waited 2 seconds: Returning"); 
 
      res({ 
 
       data: ["This should do the trick!"] 
 
      }); 
 
      }, 2000); 
 
     }) 
 
     } 
 
    } 
 
    } 
 

 
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script> 
 

 

 
<body> 
 

 

 
    <div class="main"> 
 
    <div class="body" ng-controller="newsController as vm"> 
 
     Testing: {{ vm.message }} 
 
     <br>{{ vm.news }} 
 
     <br>{{ vm }} 
 
     <br> 
 
     <button class="getTopNewsBtn" ng-click="vm.GetTopNews()">Get News</button> 
 
     <br> 
 
     <ul class="getTopNews"> 
 
     <li class="news-item" ng-repeat="news in vm.news track by $index"> 
 
      {{ news | json }} 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 

 
</body>

出典

2016-04-29 20:56:37 4UmNinja

ボタンのクリックで簡単にバインドできますが、ページの読み込み時にバインドしたいと思います。私は、コンソールログにデータが取り込まれているのを見ることができます。私は、UIがロードされ、角度ダイジェストが完了した後にデータが取得されるのではないかと疑います。ページをリフレッシュするとバインディングが機能します。表示<テーブルクラス= "テーブルテーブル応答テーブルストライプ"> {{}} info.title {{}} info.highlights – Shalin

クリックするだけでバインディングするのではなく、コントローラでその関数を呼び出してください。 'これはbtnを押すのと同じことを行い、ページを更新するときに常に結果を最初に読み込みます。 – 4UmNinja

AngularJsはAPI呼び出し後にページを更新する必要があります

答えて

関連する問題