javascript - real - Cómo enlazar datos usando TypeScript Controller y Angular Js

node js tiempo real

Question

Estoy jugando con Type Script. He convertido mi controlador angular js a Type Script, pero estoy enfrentando un problema en ng-repeater. (He adjuntado mi código de controlador a continuación: -

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

Answer 1

De la revisión rápida de su código, descubrí que el método de search del controlador es privado. Puede estar cambiando a público resolverá el problema.

Answer 2

Decidí agregar otra respuesta que describe más detalles sobre cómo crear y usar el controlador en TypeScript e inyectarlo en angularJS .

Esta es una extensión de esta respuesta

¿Cómo puedo definir mi controlador usando TypeScript? Donde también tenemos plnkr.co/edit/3XORgParE2v9d0OVg515?p=preview

Entonces teniendo esta directiva:

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 = {};
}

Podemos ver que declaramos que esta directiva está disponible como elemento. También incluimos una plantilla . Esta plantilla está lista para enlazar SearchedValue y llamar a Action en nuestro controlador Ctrl.Search() . Estamos diciendo cuál es el nombre del controlador: ''CustomerSearchCtrl'' y le pedimos al tiempo de ejecución que esté disponible como ''Ctrl'' (conrollerAs :)

Finalmente, inyectamos ese objeto en el módulo angular:

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

Podemos usar $scope como ng.IScope , pero para tener un acceso más mecanografiado, podemos crear nuestra propia interfaz :

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

De esta manera, sabemos que tenemos una cadena SearchedValue y también otra cadena FoundResult . También informamos a la aplicación que Ctrl se inyectará en ese ámbito y será del tipo CustomerSearchCtrl . Y aquí viene ese 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<any>) =>
{
var data = response.data;
this.$scope.FoundResult = data[this.$scope.SearchedValue]
|| data["Default"];
});
}
}

más su registro en el módulo

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

¿Qué es interesante en este controlador? tiene una búsqueda de acción pública, que tiene acceso a todos sus miembros a través de this. , por ejemplo, this.$http . Porque instruimos intellisense en VS que angular.d.ts tipo / interfaz

protected $http: ng.IHttpService

será utilizado, luego podremos acceder fácilmente a sus métodos. Similar es el tipo de valor devuelto en .then()

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

que contiene datos: {} de cualquier tipo ...

Espero que ayude un poco, observe que todo en plnkr.co/edit/3XORgParE2v9d0OVg515?p=preview

Answer 3

Hay un problema con su constructor y $inject : estos deben encajar

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

Lo que sucedió de hecho: todos los parámetros se movieron en el significado, que $http era de hecho $scope , etc.

Simplemente, $inject array DEBE ajustarse a la lista de parámetros del constructor

Por cierto, es por eso que anteriormente tenía aquí: https://.com/a/30482388/1679310 sugirió usar tipos en la declaración:

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

Answer 4

La biblioteca Bindable TS es una forma alternativa de configurar el enlace de datos con typecript.