асинхронной обработки данных внутри углового контроллера

Question

У меня есть следующий контроллер, который принимает объект данных асинхронно:

(function() { 
    'use strict'; 

    angular 
     .module('melon') 
     .controller('AdminPage3Ctrl', Controller); 

    Controller.$inject = ['BPsFactory']; 

    function Controller(BPsFactory) { 
     var page3ctrl = this; 
     page3ctrl.headerTitle = "Manage Boundary Partners"; 
     page3ctrl.boundaryPartners = []; 

     activate(); 
     console.log(page3ctrl) 
     console.log(page3ctrl.countries); 

     function activate() { 
      return getBPs(); 
     } 

     function getBPs() { 
      return BPsFactory.getBPs() 
      .then(function(data) { 
       page3ctrl.boundaryPartners = data; 
       var countries = []; 
       angular.forEach(page3ctrl.boundaryPartners, function(value, key) { 
        countries.push(value.country); 
       }); 
       page3ctrl.countries = countries.unique(); 
       return page3ctrl.boundaryPartners; 
      }) 
     } 
    } 
})(); 

Мне нужно извлечь некоторую информацию из этого data объекта для использования в ng-repeat на мой взгляд, а именно, массив названий стран, заполненных уникальными значениями. Для этого я использую следующие Array.prototype методы:

Array.prototype.contains = function(v) { 
    for(var i = 0; i < this.length; i++) { 
     if(this[i] === v) return true; 
    } 
    return false; 
}; 

Array.prototype.unique = function() { 
    var arr = []; 
    for(var i = 0; i < this.length; i++) { 
     if(!arr.contains(this[i])) { 
      arr.push(this[i]); 
     } 
    } 
    return arr; 
} 

Однако в примере кода выше, в то время как page3ctrl.countries определен и заполнен правильными значениями на первом console.log:

Object {headerTitle: "Manage Boundary Partners", boundaryPartners: Array[0], countries: Array[0]}boundaryPartners: Array[4]0: Object1: Object2: Object3: Objectlength: 4__proto__: Array[0]countries: Array[3]0: "Worldwide"1: "Denmark"2: "Mozambique"length: 3__proto__: Array[0]headerTitle: "Manage Boundary Partners"__proto__: Controller 

Второй один выход undefined.

Как я могу получить page3ctrl.countries на моем ng-repeat?

Answer 1

Вы используете console.logging перед тем, как обещание будет разрешено.

В функции getBPs вы возвращаете обещание и говорите javascript для продолжения выполнения, хотя метод .then еще не запущен. Вот как бы я это сделать:

function Controller(BPsFactory) { 
    var page3ctrl = this; 
    page3ctrl.headerTitle = "Manage Boundary Partners"; 
    page3ctrl.boundaryPartners = []; 

    activate(); 
    //console.log(page3ctrl) 
    //console.log(page3ctrl.countries); 

    function activate() { 
    //Why are you returning this??? 
     // return getBPs(); 
     getBPs(); 
    } 

    function getBPs() { 
     return BPsFactory.getBPs() 
     .then(function(data) { 
      page3ctrl.boundaryPartners = data; 
      var countries = []; 
      angular.forEach(page3ctrl.boundaryPartners, function(value, key) { 
       countries.push(value.country); 
      }); 
      page3ctrl.countries = countries.unique(); 
      console.log(page3ctrl) 
      //Why are you returning this??? 
      //return page3ctrl.boundaryPartners; 

     }) 
    } 
} 

В контроллерах шаблона вы могли теперь сделать что-то вроде этого (при условии, что вы используете ControllerAs: PAGE3)

<div ng-repeat="country in page3.countries"> 
<!-- Do country stuff here --> 
</div>