Comment lier des données à l'aide de la Machine Contrôleur & Angular Js

J'ai décidé d'ajouter une autre réponse décrivant plus en détail comment créer et utiliser un contrôleur dans TypeScript et à l'injecter dans angularJS.

C'est l'extension de cette Réponse

Comment puis-je définir mon contrôleur à l'aide de la Machine? Où nous avons également un travail plunker

Afin d'avoir de la présente directive:

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

Nous pouvons voir ce que nous a déclaré que cette directive est disponible que Element. Nous avons également en bordée d'un modèle. Ce modèle est prêt à se lier SearchedValue et appel à l'Action à nos contrôleur Ctrl.Search(). Nous dire quel est le nom du contrôleur: 'CustomerSearchCtrl" et demandant l'exécution pour le rendre disponible en tant que "Ctrl" (conrollerAs:)

Enfin, nous injecter cet objet dans angulaire module:

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

Nous pouvons utiliser $scope comme ng.IScope, mais pour avoir le plus tapé accès, nous pouvons créer notre propre interface:

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

De cette façon, nous savons, que nous avons chaîne SearchedValue et aussi d'autres cordes FoundResult. Nous avons également informé que l'application Ctrl sera injecté dans le champ d'application, et sera de type CustomerSearchCtrl. Et c'est là que contrôleur:

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

plus de son enregistrement dans le module

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

Ce qui est intéressant sur ce contrôleur? il a un public acton Recherche, qui a accès à l'ensemble de ses membes via this., par exemple this.$http. Parce que nous avons donné des instructions intellisense dans VS qui angulaire.d.ts/type d'interface

protected $http: ng.IHttpService

sera utilisé, plus tard, nous pouvons facilement accéder à ses méthodes. Similaires est le type de la valeur retournée dans .then()

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

qui contient des données: {} de tout type...

Espère que cela aide un peu, d'observer que tous les l'action ici

OriginalL'auteur Radim Köhler

La bibliothèque Bindable TS est une autre façon de configurer la liaison de données avec des caractères d'imprimerie.

OriginalL'auteur Jack Yum Cha