角度コントローラーがHtmlページで空白を二重中括弧で返します

私はtypescriptで単純なバインディングアプリケーションを開発しています。私は 'bugCtrl'という名前のコントローラを作成し、デバッグモード（console.logと警告）でうまく動作しているように見えます。これは、ここに私の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); 
}

まだ私がここでの問題を解決できない非常に簡単と思われます。

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

とあなたのNG-モデルのすべてがあります：

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

を私はあなたのことを見ると、これは the result I get:

出典

2016-11-24 wtplayer11

thisキーワードを使用している場合、あなたはcontrollerAs構文を使用する必要があります依存関係があります。次のことができ、代わりのthis、あなたの変数に名前を付ける$scopeを使用します。

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

出典

2016-11-24 09:06:50 trichetriche

うん、それは動作します。ありがとう!! – wtplayer11

角度コントローラーがHtmlページで空白を二重中括弧で返します

答えて

関連する問題