wtplayer11 wtplayer11 - 8 days ago 5
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>
<div>
There are {{ test ? '1' : '2' }} bugs (div1)
</div>
<div>
There are <span ng-bind="{{ workItems.length }}"></span> bugs (div2)
</div>
<div>
Descriptions : <span ng-bind-template="{{ workItems[0].description }} {{ workItems[1].description }}"></span> (div3)
</div>
<div>
There are {{ getLenght(); }} bugs (div4)
</div>
Display as Grid? <input type="checkbox"><br />
<div class="well" ng-include="getView()"> </div>
<!--<ng-include src="getView()"></ng-include>-->
</div>



<!-- 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";

alert(this.workItems[0].description);
console.log(this.workItems.length.toString());
console.log(this.workItems[0].description);
}


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

angular
.module("bugApp")
.controller("bugCtrl", BugCtrl);
}


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

Answer

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" }
        ];
Comments