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.