Como vincular dados usando o TypeScript Controller & Angular Js

Decidi adicionar outra resposta descrevendo mais detalhes sobre como criar e usar o controlador no TypeScript e injetá-lo no angularJS .

Esta é a extensão desta resposta

Como posso definir meu controlador usando o TypeScript? Onde também temos uma plunker de trabalho

Então, tendo esta diretiva:

 export class CustomerSearchDirective implements ng.IDirective { public restrict: string = "E"; public replace: boolean = true; public template: string = "
" + "" + "Search" + "
 for searched value {{SearchedValue}} " + " we found: {{FoundResult}}
" + "
"; public controller: string = 'CustomerSearchCtrl'; public controllerAs: string = 'Ctrl'; public scope = {}; } 

Podemos ver que declaramos esta diretiva como disponível. Nós também alinhamos um modelo . Este modelo está pronto para ligar o SearchedValue e chamar Action no nosso controlador Ctrl.Search() . Estamos dizendo qual é o nome do controlador: ‘CustomerSearchCtrl’ e pedindo tempo de execução para torná-lo disponível como ‘Ctrl’ (conrollerAs 🙂

Finalmente, injetamos esse object no módulo angular:

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

Podemos usar $scope como ng.IScope , mas para ter mais access a ele, podemos criar nossa própria interface :

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

Dessa forma, sabemos que temos string SearchedValue e também outra string FoundResult . Também informamos ao aplicativo que o Ctrl será injetado nesse escopo e será do tipo CustomerSearchCtrl . E aqui vem esse controlador:

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

mais seu registro no módulo

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

O que é interessante neste controlador? tem uma pesquisa acton pública, que tem access a todos os seus membros por meio this. Por exemplo, this.$http . Porque nós instruímos intellisense em VS que tipo / interface angular.d.ts

 protected $http: ng.IHttpService 

será usado, mais tarde, podemos acessar facilmente seus methods. Semelhante é o tipo de valor retornado em .then()

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

que contém dados: {} de qualquer tipo …

Espero que ajude um pouco, observe que tudo em ação aqui

Há um problema com seu construtor e $inject – eles devem se encheckboxr

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

O que aconteceu de fato – todos os parâmetros foram movidos no sentido de que $http era $scope de fato, etc …

Simplesmente, $inject array DEVE caber na lista de parâmetros do construtor

BTW, é por isso que eu já tinha aqui: https://stackoverflow.com/a/30482388/1679310 sugerido para usar os tipos na declaração:

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

A biblioteca Bindable TS é uma maneira alternativa de configurar a vinculação de dados com o typescript.

A partir da revisão rápida do seu código, descobri que o método de search do controlador é privado. Pode estar mudando para o público vai resolver o problema.