角度控制器返回空白Html页面中的双花括号

我正在打字与简单的绑定应用程序。我写了一个名为'bugCtrl'的控制器，它看起来在调试模式下工作得很好（还有console.log和alert）。这是我的html页面角度控制器返回空白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); 
}

这看起来很简单但我不能在这里解决问题。这是 the result I get:

来源

2016-11-24 wtplayer11

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

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

和所有的NG-车型将拥有：

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

我看到你具有$scope依赖关系。你可以，而不是this，用$scope命名的变量：

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

来源

2016-11-24 09:06:50 trichetriche

呀它的工作原理。谢谢！！ – wtplayer11

角度控制器返回空白Html页面中的双花括号

回答

相关问题