TypeScript Controller not handling HTTP promises - angularjs

Question

I have been learning Angular and everything's been going smoothly. I have decided to try and incorporate TypeScript into this and wrote a small test controller in an already existing Angular/WebApi project I have been working on.
The controller "works" and initializes just fine, however, my $scope properties are not being updated when set to an HTTP promise. I have attached a "working" example of my issue using the TypeScript generated JS file. When debugging, I can see the then get triggered on the promise and the data I expected does return, but the page displays {}
Here is my actual TypeScript file.
/// <reference path="../../tds/angularjs/angular.d.ts" />
module RecordEditor {
export interface Scope extends ng.IScope{
tableId: any;
}
export class Controller {
$scope: Scope;
api : any;
constructor($scope: Scope, myApi: any) {
this.api = myApi;
this.$scope = $scope;
this.$scope.tableId = this.api.getTestResponse();
}
}
}
var app = angular.module("myApp");
app.controller("RecordEditor.Controller", ['$scope', 'myApi', RecordEditor.Controller]);
That controller is the only thing I have actually written in TypeScript. All the other controllers are in JavaScript and the same api I built returns responses just fine with those.
Below is the actual runnable snippet code with the JavaScript version of my Controller.
(function() {
var app = angular.module('myApp', []);
}());
(function() {
var myApi = function($http) {
var getTestResponse = function() {
// Hope it is okay to use SE API to test this question. Sorry if not.
return $http.get("https://api.stackexchange.com/2.2/sites")
.then(function(response) {
return "Hello!";
});
};
return {
getTestResponse: getTestResponse,
};
};
var module = angular.module("myApp");
module.service("myApi", ['$http', myApi]);
}());
var RecordEditor;
(function(RecordEditor) {
var Controller = (function() {
function Controller($scope, myApi) {
var _this = this;
this.api = myApi;
this.$scope = $scope;
this.$scope.response = this.api.getTestResponse();
this.$scope.ctorTest = 42;
}
return Controller;
})();
RecordEditor.Controller = Controller;
})(RecordEditor || (RecordEditor = {}));
var app = angular.module("myApp");
app.controller("RecordEditor.Controller", ['$scope', 'myApi', RecordEditor.Controller]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<div ng-app="myApp" ng-controller="RecordEditor.Controller">
<div >
Scope property set in constructor: {{ctorTest}}
</div>
<div >
Scope response value: {{response}}
</div>
<div >
Scope response should have been "Hello!"
</div>
</div>
Can anyone actually tell me what I am doing wrong? Everything looks fine to me.

Answer 1

var getTestResponse = function() {
return $http.get("https://api.stackexchange.com/2.2/sites")
.then(function(response) {
return "Hello!"; // <-- does not do what you think it does
});
};
/** elsewhere **/
this.$scope.response = this.api.getTestResponse();
The inner return statement here does not return a value from getTestResponse. Instead, it returns a value from the Promise which is basically discarded. getTestResponse returns immediately with a Promise object that is of no particular use for binding to the scope.
Fixed version of the JS:
(function() {
var app = angular.module('myApp', []);
}());
(function() {
var myApi = function($http) {
var getTestResponse = function() {
// Hope it is okay to use SE API to test this question. Sorry if not.
return $http.get("https://api.stackexchange.com/2.2/sites")
.then(function(response) {
return "Hello!";
});
};
return {
getTestResponse: getTestResponse,
};
};
var module = angular.module("myApp");
module.service("myApi", ['$http', myApi]);
}());
var RecordEditor;
(function(RecordEditor) {
var Controller = (function() {
function Controller($scope, myApi) {
var _this = this;
this.api = myApi;
this.$scope = $scope;
/** FIXED **/
this.api.getTestResponse().then(function(v) { _this.$scope.response = v; });
this.$scope.ctorTest = 42;
}
return Controller;
})();
RecordEditor.Controller = Controller;
})(RecordEditor || (RecordEditor = {}));
var app = angular.module("myApp");
app.controller("RecordEditor.Controller", ['$scope', 'myApi', RecordEditor.Controller]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<div ng-app="myApp" ng-controller="RecordEditor.Controller">
<div >
Scope property set in constructor: {{ctorTest}}
</div>
<div >
Scope response value: {{response}}
</div>
<div >
Scope response should have been "Hello!"
</div>
</div>

Answer 2

Ok here's the issue. You are trying to set your response to the actual callback function.
Instead, you have to set the response property inside callback using the response you got from the http call.
Here is the api function
var getTestResponse = function() {
return $http.get("http://vimeo.com/api/oembed.json?url=http%3A//vimeo.com/76979871");
};
Here is your controller code where you have to set your response property to bind to UI.
_this.api.getTestResponse().success(function(resp) {
_this.$scope.response = resp.height; //I just used height property from response as example
});
Here is the jsfiddle
http://jsfiddle.net/HB7LU/7386/
Make sure you first get your stackexachange call working. I used vimeo call as example.
Let me know if you have any questions.
So, in your TypeScript code, you have to change
this.$scope.tableId = this.api.getTestResponse();
to
this.api.getTestResponse().then((resp) =>
{
this.$scope.tableId = resp;
});
And make your API just return a promise.