AngularJs требует обновления страницы после вызова API

Я пишу приложение angularjs. Требование состоит в том, чтобы отображать данные пользователя после входа пользователя в систему. Поэтому, когда пользователь успешно входит в систему, он направляется к следующему виду. Мое приложение работает нормально до этого момента. Теперь при загрузке следующего представления мне нужно отобразить существующие записи пользователя. Однако в этот момент я вижу пустую страницу, я могу ясно видеть на консоли, что данные возвращаются, но это не является обязательным. Я использовал $ scope. $ Watch, $ scope. $ Apply, даже попытался вызвать область действия в элементе пользовательского интерфейса, но все они приводят к уже начатому дайджесту. Что мне делать? Страница загружается, если я обновляю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

Как вы отображения '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

Я могу легко связать с нажатием кнопки, но я хочу привязку при загрузке страницы. Я вижу, что данные извлекаются в журнале консоли. Я сомневаюсь, что данные извлекаются после загрузки пользовательского интерфейса и завершения углового дайджеста. Как только я обновляю страницу, привязка работает. Вид <таблица класс = "стол стол реагирующих стол полосатые"> <тр нг повтора = "Информация в vm.news"> {{}} info.title {{}} info.highlights – Shalin

вместо привязки к ng-click, просто вызовите функцию в контроллере. 'function newsController ($ http, newsService, $ scope) {/ * Предыдущий код */GetTopNews();}' .. это будет делать то же самое, что и при нажатии btn, и когда обновляется страница, всегда будет загружать результаты в первую очередь. – 4UmNinja

AngularJs требует обновления страницы после вызова API

ответ

Смежные вопросы