HTTP Get Angular 1.5-Komponente

Question

Ich versuche, eine 1.5-Komponente mit AngularJS zu verwenden. Ich habe einen Dienst, der meine JSON-Datei mit $ HTTP abruft und die Zusage zurückgibt. Ich löste dann das Versprechen in meinem Komponenten-Controller und weise ihm einen Wert auf dem Controller zu, der this.work verwendet. Obwohl dies auf meiner HTML-Seite nicht angezeigt wird. Ich habe Kommentare in den Code eingefügt, um ein wenig besser zu erklären, wenn das verwirrend ist.

Es ist mein Verständnis, dass die Auflösung des Versprechens (in meinem Controller) asynchron passiert, aber sobald es gelöst ist, warum ich nicht die aktualisierte auf die Variable $ctrl.work in der Ansicht geändert angezeigt. Stattdessen erhalte ich nie einen Wert von der Variablen.

// 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

Sie verlieren Zusammenhang mit der Ausführung, die die this innerhalb Ihrer Callback-Funktion bedeutet, wenn nicht und Instanz des Component-Controllers. Eine einfache (und moderne) Lösung ist die Verwendung von arrow function anstelle von normalen anonymen:

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