Angular Controller在双卷发括号中的HTML页面中返回空白

我正在处理带有打字稿的简单绑定应用程序。我写了一个名为" bugctrl"的控制器，看起来像在调试模式下工作正常（也是console.log and Alert）。这是我的HTML页

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

这是我的控制器和bugapp.js文件：

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);
}

看来很简单，但我无法在这里解决问题。这就是我得到的结果：

使用this关键字时，您需要使用controllerAs语法：

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

，您的所有NG模型都会有：

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

我看到您有$scope依赖关系。您可以使用$scope代替this来命名您的变量：

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

相关内容

最新更新

热门标签：