Как AngularJS может иметь доступ к результату axios в контроллере класса?

Question

Итак, у меня есть небольшое приложение AngularJS 1.5, в которое я хочу поместить некоторые данные из файла JSON, используя axios lib и контроллер класса ES6.

angular.module('app', []).controller('listController', listController)

код контроллера:

class CompanyListController  {
     constructor(){
        this.list = ""
    }
    getList(){
        axios.get("./company.list.json")
        .then((response) => {                   
            this.list = response.data;
            console.log(response);
        })
        .catch((error) => {
            console.log(error);
        })
    return  list;
    }  }

view:

  <div ng-controller = "listController as list">
      <div ng-bind = 'list.getList'></div>
      <div>
        {{ list.getList }}
      </div>
  </div>

n-bind в представлении дает мне это:

getList(){
  return s.a.get("./company.list.json")
  .then(e=>{this.list=e.data,console.log(e)})
  .catch(e=>{console.log(e)}),this.list}

что, я думаю, является результатом минимизации webpack.И ng-bind также выполняет
console.log из axios, который полностью регистрирует результат axios.{{ list.getList }} ничего не выбрасывает. axios и синтаксис контроллера класса обязательно в этом приложении.Таким образом, Angular отображает значение списка (null), но до того, как его изменяет axios.Не могли бы вы объяснить, как правильно это сделать?

Answer 1

axios асинхронных запросов к серверу.

class CompanyListController  {
     constructor(){
        this.listJson = "";
        this.getList();
    }

    getList(){
        axios.get("./company.list.json")
        .then((response) => {                   
            this.listJson = response.data;
            console.log(response);
        })
        .catch((error) => {
            console.log(error);
        });
    }
}

html должен быть таким.

 <div ng-controller = "listController as ctr">
  <div ng-bind="ctr.listJson">
 </div>