javascript - Hvordan binde data ved å bruke TypeScript Controller og Angular Js

Jeg leker med Type Script. Jeg har konvertert min AngularJS-kontroller til Type Script, men jeg har problemer med ng-repeater. (Jeg har vedlagt kontrollerkoden min nedenfor:-

class CustomCtrl{
    public customer;
    public ticket;
    public services;
    public cust_File;
    public ticket_file;
    public service_file;

    static $inject = ['$scope', '$http', '$templateCache'];
    constructor (
            private $http,
            private $templateCache
    ){}

Svar #1

Jeg bestemte meg for å legge til et annet svar som beskriver flere detaljer om hvordan man lager og bruker en controller i TypeScript og injiserer den i angularJS.

Dette er en utvidelse av dette svaret

Hvordan kan jeg definere kontrolleren min ved å bruke TypeScript? Hvor vi også har en fungerende plunker

Så å ha denne direktiven:

export class CustomerSearchDirective implements ng.IDirective
{
    public restrict: string = "E";
    public replace: boolean = true;
    public template: string = "<div>" +
        "<input ng-model=\"SearchedValue\" />" +
        "<button ng-click=\"Ctrl.Search()\" >Search</button>" +
        "<p> for searched value <b>{{SearchedValue}}</b> " +
        " we found: <i>{{FoundResult}}</i></p>" +
        "</div>";
    public controller: string = 'CustomerSearchCtrl';
    public controllerAs: string = 'Ctrl';
    public scope = {};
}

Vi kan se at vi erklærte denne direktiven for å være tilgjengelig som Element. Vi har også lagt inn en mal. Denne malen er klar til å binde SearchedValue og kalle Action på vår kontroller Ctrl.Search(). Vi sier hva navnet på kontrolleren er: 'CustomerSearchCtrl' og ber kjøretiden gjøre den tilgjengelig som 'Ctrl' (controllerAs:)

Til slutt injiserer vi det objektet i Angular-modulen:

app.directive("customerSearch", [() => new CustomerSearch.CustomerSearchDirective()]);

Vi kan bruke $scope som ng.IScope, men for å få mer typet tilgang til det, kan vi lage vår egen grensesnitt:

export interface ICustomerSearchScope  extends ng.IScope
{
    SearchedValue: string;
    FoundResult: string;
    Ctrl: CustomerSearchCtrl;
}

På denne måten vet vi at vi har streng SearchedValue og også en annen streng FoundResult. Vi informerte også applikasjonen om at Ctrl vil bli injisert i det området, og vil være av typen CustomerSearchCtrl. Og her kommer den kontrolleren:

export class CustomerSearchCtrl
{
    static $inject = ["$scope", "$http"];
    constructor(protected $scope: CustomerSearch.ICustomerSearchScope,
        protected $http: ng.IHttpService)
    {
        // todo
    }
    public Search(): void
    {
        this.$http
            .get("data.json")
            .then((response: ng.IHttpPromiseCallbackArg<any>) =>
            {
                var data = response.data;
                this.$scope.FoundResult = data[this.$scope.SearchedValue]
                    || data["Default"];
            });
    }
}

pluss dets registrering i modul

app.controller('CustomerSearchCtrl',  CustomerSearch.CustomerSearchCtrl);

Hva er interessant med denne kontrolleren? Den har en offentlig handling Search, som har tilgang til alle medlemmene sine via this., f.eks. this.$http. Fordi vi instruerte Intellisense i VS om at angular.d.ts type/grensesnitt

protected $http: ng.IHttpService

vil bli brukt, vi kan senere enkelt få tilgang til metodene dens. På samme måte er typen til den returnerte verdien i .then()

.then((response: ng.IHttpPromiseCallbackArg<any>) => {...

som inneholder data: {} av hvilken som helst type...

Håper det hjelper litt, observer at alle er i aksjon her

Svar #2

Det er ett problem med konstruktøren din og $inject - disse må passe sammen

// wrong
static $inject = ['$scope', '$http', '$templateCache'];
constructor (
        private $http,
        private $templateCache
){}

// should be
static $inject = ['$scope', '$http', '$templateCache'];
constructor (
        private $scope,
        private $http,
        private $templateCache
){}

Hva som faktisk skjedde - alle parametere ble flyttet i betydningen, at $http faktisk var $scope, osv...

Enkelt sagt, $inject-arrayet MÅ passe til konstruktørens parameterliste

Forresten, det er derfor jeg tidligere her: https://stackoverflow.com/a/30482388/1679310 foreslo å bruke typer i deklarasjonen:

   constructor(protected $scope: ICustomerScope,
        protected $http: ng.IHttpService,
        protected $templateCache: ng.ITemplateCacheService)
    { ... }

Relaterte artikler