Estou brincando com Type Script.Eu tenho converter meu controlador js angular para Type Script Mas estou enfrentando problema no ng-repetidor. (Anexei o código do meu controlador abaixo: –
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 ){}
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 = "" + "" + "" + " 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.