okayilltry okayilltry - 15 days ago 5
AngularJS Question

HTTP Get Angular 1.5 component

I'm trying to use a 1.5 component with AngularJS. I have a service that gets my JSON file using $HTTP and returns the promise. I then resolve the promise in my components controller and assign it to a value on the controller using

this.work
. Although this doesn't show in my HTML page. I have included comments in the code to explain a little better if this is confusing.

It's my understanding that the resolving of the promise (in my controller) is happening asynchronously but once it's resolved why am I not shown the updated changed to the variable
$ctrl.work
in the view. Instead I never get a value from the variable.

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

You are loosing context of execution which means that this inside your callback function if not and instance of component controller. A simple (and modern) solution is to use arrow function instead of normal anonymous:

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