AngularJs erfordert Seitenaktualisierung nach API-Aufruf

Ich schreibe eine angularjs App. Die Anforderung besteht darin, die Benutzerdaten anzuzeigen, sobald sich der Benutzer anmeldet. Wenn sich ein Benutzer erfolgreich anmeldet, wird er zur nächsten Ansicht weitergeleitet. Meine Bewerbung funktioniert bis zu diesem Punkt. Jetzt, während die nächste Ansicht geladen wird, muss ich die vorhandenen Datensätze des Benutzers anzeigen. An dieser Stelle sehe ich jedoch eine leere Seite. Ich kann in der Konsole deutlich sehen, dass die Daten zurückgegeben werden, aber es ist nicht bindend. Ich habe $ scope verwendet. $ Watch, $ scope. $ Apply, habe sogar versucht, den Bereich auf dem UI-Element aufzurufen, aber alle führen dazu, dass der Digest bereits ausgeführt wird. Was soll ich machen? Die Seite lädt beim AktualisierenAngularJs erfordert Seitenaktualisierung nach API-Aufruf

(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(); 
}

})();

Vielen Dank für

Quelle

2016-04-29 Shalin

Wie werden angezeigt, die Sie 'vm.news' in der Benutzeroberfläche? – Kyle

Lesen Sie zeigen nicht, wie Sie dies in Ihrer Vorlage sind verbindlich .. Ich habe versucht, Ihnen eine gute Idee neu zu geben.

Ich denke, das Problem ist die Art, wie Sie Ihr Versprechen von Ihrem newsService behandeln. Versuchen Sie, sich $q Promises anzusehen. vm.news wird durch eine Funktion außerhalb des Winkels aktualisiert. Verwenden Sie $ scope. $ apply, um die Aktualisierung zu erzwingen.

die original fiddle is here und 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>

Quelle

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

Ich kann leicht mit Knopfklick binden, aber ich möchte die Bindung beim Laden der Seite. Ich kann sehen, dass Daten im Konsolenprotokoll abgerufen werden. Ich bezweifle, dass die Daten abgerufen werden, nachdem die Benutzeroberfläche geladen und der Digest abgeschlossen wurde. Sobald ich die Seite aktualisiere, funktioniert die Bindung. Ansicht

{{}} info.title

{{}} info.highlights

– Shalin

statt an einen ng-Klick binden, rufen Sie einfach die Funktion in Ihrem Controller. 'Funktion newsController ($ http, NewsService, $ Scope) {/ * Vorheriger Code */GetTopNews();}' .. Dies wird das gleiche tun wie Drücken von BTN und beim Aktualisieren der Seite, wird immer zuerst Ergebnisse laden. – 4UmNinja

AngularJs erfordert Seitenaktualisierung nach API-Aufruf

Antwort

Verwandte Themen