AngularJs在API調用後需要頁面刷新

我在寫一個angularjs應用程序。要求在用戶登錄後顯示用戶的數據。因此，當用戶成功登錄時，他/她將被路由到下一個視圖。至此我的應用程序正在運行良好。現在隨着下一個視圖加載，我需要顯示用戶的現有記錄。然而在這一點上，我看到一個空白頁面，我可以在控制檯中清楚地看到數據正在返回，但它沒有約束力。我已經使用了$ scope。$ watch，$ 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正在通過angular之外的函數進行更新。使用$ scope。$ apply來強制刷新。

的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

而不是綁定到ng-click，只需調用控制器中的函數即可。 '函數newsController（$ http，newsService，$ scope）{/ *前面的代碼*/GetTopNews（）;}'這樣做和按btn一樣，當刷新頁面的時候，總會首先加載結果。 – 4UmNinja

AngularJs在API調用後需要頁面刷新

回答

相關問題