Come associare i dati utilizzando il controller TypeScript e i J angolari

Sto giocando con Type Script. Ho convertito il mio controller angular js in Type Script, ma ho riscontrato problemi con ng-repeater. (Ho allegato il mio codice di controllo qui sotto: –

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

Ho deciso di aggiungere un’altra risposta che descrive maggiori dettagli su come creare e utilizzare controller in TypeScript e iniettarlo in angularJS .

Questa è l’estensione di questa risposta

Come posso definire il mio controller usando TypeScript? Dove abbiamo anche un plunker funzionante

Quindi avendo questa direttiva:

 export class CustomerSearchDirective implements ng.IDirective { public restrict: string = "E"; public replace: boolean = true; public template: string = "
" + "" + "" + "

for searched value {{SearchedValue}} " + " we found: {{FoundResult}}

" + "
"; public controller: string = 'CustomerSearchCtrl'; public controllerAs: string = 'Ctrl'; public scope = {}; }

Possiamo vedere che abbiamo dichiarato questa direttiva come disponibile. Abbiamo anche allineato un modello . Questo modello è pronto per vincolare il valore di Ctrl.Search() e chiamare Action sul nostro controller Ctrl.Search() . Stiamo dicendo qual è il nome del controller: “CustomerSearchCtrl” e chiedendo al runtime di renderlo disponibile come “Ctrl” (conrollerAs 🙂

Infine iniettiamo quell’object nel modulo angular:

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

Possiamo usare $scope come ng.IScope , ma per avere un accesso più tipizzato ad esso, possiamo creare la nostra interfaccia :

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

In questo modo, sappiamo, che abbiamo string stringa di ricerca e anche un’altra stringa FoundResult . Abbiamo anche informato l’applicazione che Ctrl sarà iniettato in quell’ambito e sarà di tipo CustomerSearchCtrl . E qui arriva quel 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) => { var data = response.data; this.$scope.FoundResult = data[this.$scope.SearchedValue] || data["Default"]; }); } } 

più la sua registrazione nel modulo

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

Cosa è interessante su questo controller? ha una ricerca pubblica, che ha accesso a tutte le sue membrane attraverso this. ad es this.$http . Perché abbiamo istruito intellisense in VS che tipo / interfaccia angular.d.ts

 protected $http: ng.IHttpService 

verrà utilizzato, in seguito potremo accedere facilmente ai suoi metodi. Simile è il tipo di valore restituito in .then()

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

che contiene dati: {} di qualsiasi tipo …

Spero che aiuti un po ‘, osserva che tutto è in azione qui

C’è un problema con il costruttore e $inject : questi devono combaciare

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

Quello che è successo in effetti – tutti i parametri sono stati spostati nel significato, che $http era $scope in effetti, ecc …

Semplicemente, $inject array DEVE adattarsi alla lista dei parametri del costruttore

A proposito, è per questo che avevo precedentemente qui: https://stackoverflow.com/a/30482388/1679310 suggerito di utilizzare i tipi nella dichiarazione:

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

La libreria Bindable TS è un modo alternativo per impostare l’associazione dei dati con typescript.

Dalla rapida revisione del tuo codice ho trovato che il metodo di search del controller è privato. Potrebbe cambiarlo in pubblico per risolvere il problema.