javascript - Hur man binder data med TypeScript Controller och Angular Js

Jag leker runt med Type Script. Jag har konverterat min Angular JS-controller till Type Script men jag har problem med ng-repeater. (Jag har bifogat min controllerkod nedan:-

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

Jag bestämde mig för att lägga till ett annat svar som beskriver mer detaljerat hur man skapar och använder en controller i TypeScript och injicerar den i angularJS.

Detta är en förlängning av detta svar

Hur kan jag definiera min kontroller med TypeScript? Där vi också har en fungerande plunker

Så att ha denna direktiv:

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 att vi deklarerade denna direktiv för att vara tillgänglig som Element. Vi har också inkluderat en mall. Denna mall är redo att binda SearchedValue och kalla Action på vår controller Ctrl.Search(). Vi säger vad kontrollerns namn är: 'CustomerSearchCtrl' och ber runtime att göra den tillgänglig som 'Ctrl' (controllerAs:)

Slutligen injicerar vi det objektet i Angular-modulen:

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

Vi kan använda $scope som ng.IScope, men för att få mer typad åtkomst till det kan vi skapa vårt eget gränssnitt:

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

På det här sättet vet vi att vi har strängen SearchedValue och även en annan sträng FoundResult. Vi har också informerat applikationen om att Ctrl kommer att injiceras i den scope:n, och att den kommer att vara av typen CustomerSearchCtrl. Och här kommer den controller:

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

plus dess registrering i modulen

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

Vad är intressant med denna kontrollant? den har en offentlig åtgärd Search, som har tillgång till alla dess medlemmar via this., t.ex. this.$http. Eftersom vi instruerade intellisense i VS att angular.d.ts typ/gränssnitt

protected $http: ng.IHttpService

kommer att användas, vi kan senare enkelt komma åt dess metoder. Liknande är typen av returnerat värde i .then()

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

som faktiskt innehåller data: {} av vilken typ som helst...

Hoppas det hjälper lite, observera att allt är i aktion här

Svar #2

Det finns ett problem med din konstruktor och $inject - dessa måste passa ihop

// 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
){}

Vad som faktiskt hände - alla parametrar flyttades i betydelsen, att $http faktiskt var $scope, etc...

Enkelt, $inject-arrayen MÅSTE passa konstruktörens parameterlista

Förresten, det är därför jag tidigare här: https://stackoverflow.com/a/30482388/1679310 föreslog att använda typer i deklarationen:

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

Relaterade artiklar