Angular Controller gibt leer in HTML-Seite in den geschweiften Klammern zurück

Ich arbeite an einer einfachen Bindungsanwendung mit Typoskript. Ich habe einen Controller namens 'bugCtrl' geschrieben und es sieht so aus, als würde es im Debug-Modus gut funktionieren (auch console.log und alert). dies ist meine HTML-SeiteAngular Controller gibt leer in HTML-Seite in den geschweiften Klammern zurück

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

Hier mein Controller und bugApp.js Datei:

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

Es scheint ziemlich einfach, aber ich kann das Problem hier nicht lösen. Und das ist the result I get:

Quelle

2016-11-24 wtplayer11

Wenn this Schlüsselwort verwenden, müssen Sie die controllerAs Syntax:

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

und alle Ihre ng-Modelle haben:

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

ich, dass Sie sehen, habe eine $scope Abhängigkeit. Sie können anstelle von this verwenden $scope Ihre Variablen zu nennen:

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

Quelle

2016-11-24 09:06:50 trichetriche

Ja, es funktioniert. Vielen Dank!! – wtplayer11

Angular Controller gibt leer in HTML-Seite in den geschweiften Klammern zurück

Antwort

Verwandte Themen