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调用后需要页面刷新

回答

相关问题