HTTP Get Angular 1.5 component

Question

Я пытаюсь использовать компонент 1.5 с AngularJS. У меня есть служба, которая получает мой JSON-файл с использованием $ HTTP и возвращает обещание. Затем я разрешаю обещание в контроллере компонентов и назначаю его значению на контроллере, используя this.work. Хотя это не показано на моей странице HTML. Я включил комментарии в код, чтобы объяснить немного лучше, если это сбивает с толку.

Это мое понимание, что решение обещания (в моем контроллере) происходит асинхронно, но после того, как оно будет разрешено, почему я не показывал обновленную измененную на переменную $ctrl.work в представлении. Вместо этого я никогда не получаю значение от переменной.

// Component 
    (function() { 
     angular.module('development') 
      .component('pgDev', { 
       templateUrl: 'app/development/development.template.html', 
       controller: ['workList', function (workList) { 

        //this.work = 'HELLO WORLD'; // <- this shows up in the html if uncommented 

        workList.getWorkItems().then(function (d) { 
         console.log(d.test); // outputs: myjsonfile 
         this.work = d.test; // <- this doesnt show in the html 
        }); 

       }] 
      }) 
    }()); 

    // HTTP Get Service 
    (function() { 
     angular.module("development").factory("workList", ["$http", 
      function ($http) { 
       return { 
        getWorkItems: function() { 
         return $http.get("data/worklist/worklist.json").then(function (d) { 
          return d.data; 
         }); 
        } 
       } 
      }]) 
    })(); 

    // html 
    workitems: {{$ctrl.work}} 

Answer 1

Вы освобождаете контекст исполнения, что означает, что this внутри вашей функции обратного вызова, если нет, и экземпляр компонента контроллера. Простым (и современным) решением является использование arrow function вместо обычного анонимного:

workList.getWorkItems().then(d => { 
    this.work = d.test; 
});