角度控制器返回空白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頁面中的雙花括號

回答

相關問題