angularjs update view после $ http.get

Question

У меня есть <ul> в моем представлении html, и содержимое этого <ul> заселено на основе $ http.get.

HTML:

<div id="recentlyReleased" ng-controller="sampleRecordController as recCtrl"> 
    <h1>Sample Records</h1> 
    <ul> 
     <li class="last-child" ng-repeat="record in recCtrl.records"> 
      <a target="_new" ng-href="" > 
       <span>sample 1</span> 

      </a> 
     </li> 
    </ul> 
    <a ng-click="recCtrl.displayRecords('a')" href=""> 
     <img /> 
    </a> 
    <a ng-click="recCtrl.displayRecords('b')" href=""> 
     <img /> 
    </a> 
</div> 

завод

angular.module('homeApp.services', []) 
    .factory('homePage', function ($http) { 
     return { 
      showRecords: function (fac) { 
       return $http.get('/home/getRandom?num=10&fac=' + fac) 
         .then(function (response) { 
          return response.data 
         }); 
      }    
     } 

    } 

    ); 

Контроллер

angular.module('homeApp.controllers') 
    .controller('sampleRecordController', function (homePage) { 
     var r = this; 
     r.base_url = base_url; 
     r.records = []; 
     var currentFac='c'; 
     r.displayRecords = function (fac) { 
      homePage.setFac(fac); 
      homePage.showRecords(homePage.getFac()).then(function (data) { 
       r.records = data; 
      }); 

     }, 
     r.displayRecords(currentFac); //initial load 

    }) 

код сначала загрузить список <ul> успешно, но когда я нажал на <a>, просмотр html не обновляется. Я новичок в angularjs, кто-то может помочь? Спасибо

Answer 1

Что вы должны сделать, это вернуть обещание $ http.get(), как показано ниже.

angular.module('homeApp.services', []) 
.factory('homePage', function ($http) { 
    return { 
     showRecords: function (fac) { 
      // return the promise here 
      return $http.get('/home/getRandom?num=10&fac=' + fac); 
     }    
    } 

}); 

angular.module('homeApp.controllers') 
.controller('sampleRecordController', function (homePage) { 
    var r = this; 
    r.base_url = base_url; 
    r.records = []; 
    var currentFac='c'; 
    r.displayRecords = function (fac) { 
     homePage.setFac(fac); 
     homePage.showRecords() // resolve here 
     .then(function (data) { 
      r.records = data; 
     }); 

    }, 
    r.displayRecords(currentFac); //initial load 

}); 

ПРИМЕЧАНИЕ: Вы не можете вернуть отклик Ajax вызова, поскольку он работает в другом потоке, и вы не будете знать, когда вызов будет завершена. Вы должны попытаться узнать о обещаниях.