wtplayer11 wtplayer11 - 9 months ago 49
TypeScript Question

Angular controller returns blank in Html page in the double curly braces

I'm working on a simple binding application with typescript. I wrote a controller named 'bugCtrl' and it looks like working just fine in debug mode (also console.log and alert). this is my html page

<body ng-app="bugApp">
<div class="panel panel-primary" ng-controller="bugCtrl">
<h3>Bug List</h3>
There are {{ test ? '1' : '2' }} bugs (div1)
There are <span ng-bind="{{ workItems.length }}"></span> bugs (div2)
Descriptions : <span ng-bind-template="{{ workItems[0].description }} {{ workItems[1].description }}"></span> (div3)
There are {{ getLenght(); }} bugs (div4)
Display as Grid? <input type="checkbox"><br />
<div class="well" ng-include="getView()"> </div>
<!--<ng-include src="getView()"></ng-include>-->

<!-- Library Scripts -->
<script src="../../scripts/angular.js"></script>

<!-- Application Script -->
<script src="../bugApp.js"></script>

<!-- Services -->
<!--<script src="app/common/services/common.services.js"></script>-->
<!-- Controllers -->
<script src="../common/controllers/bugCtrl.js"></script>

Here is my controller and bugApp.js file:

module app {
var bugApp = angular.module("bugApp",

module app.controller {
interface IWorkItems {
description: string;
status: string;
getView?(): string;

class BugCtrl {
workItems: Array<IWorkItems>;
test: string;

constructor($scope, $timeout) {

this.workItems = [
{ description: "Severe bug", status: "Open" },
{ description: "Minor bug", status: "Closed" }
this.test = "BBB";


getLenght(): string {
return this.workItems.length.toString();

.controller("bugCtrl", BugCtrl);

It seems pretty simple yet I cannot resolve the problem here. And this is
the result I get:

Answer Source

When using this keyword, you need to use the controllerAs syntax :

<div class="panel panel-primary" ng-controller="bugCtrl as vm">

and all of your ng-models will have :

<td>There are {{ vm.test ? '1' : '2' }} bugs (div1)</td>

I see that you have a $scope dependency. You can, instead of this, use $scope to name your variables :

$scope.workItems = [
            { description: "Severe bug", status: "Open" },
            { description: "Minor bug", status: "Closed" }