Как связать данные с помощью TypeScript Controller & Angular Js

Ответ 1

Я решил добавить еще один ответ, описывающий более подробные сведения о том, как создавать и использовать контроллер в TypeScript и вводить его в angularJS.

Это расширение этого ответа

Как определить мой контроллер с помощью TypeScript? Где мы также имеем рабочий plunker

Итак, имея эту директиву:

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

Мы видим, что мы объявили эту директиву доступной как E lement. Мы также создали шаблон . Этот шаблон готов привязать SearchedValue и вызвать действие на нашем контроллере Ctrl.Search(). Мы говорим, что имя контроллера: "CustomerSearchCtrl" и запрашивает время выполнения, чтобы сделать его доступным как "Ctrl" (conrollerAs:)

Наконец, мы добавляем этот объект в модуль angular:

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

Мы можем использовать $scope как ng.IScope, но чтобы иметь более типичный доступ к нему, мы можем создать собственный интерфейс:

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

Таким образом, мы знаем, что у нас есть строка SearchedValue, а также другая строка FoundResult. Мы также сообщили программе, что Ctrl будет введена в эту область и будет иметь тип CustomerSearchCtrl. И вот этот контроллер:

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

плюс его регистрация в модуле

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

Что интересно на этом контроллере? он имеет один общедоступный acton Search, который имеет доступ ко всем своим membes через this., например. this.$http. Поскольку мы проинструктировали intellisense в VS, что angular.d.ts type/interface

protected $http: ng.IHttpService

мы сможем позже легко получить доступ к его методам. Аналогичным является тип возвращаемого значения в .then()

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

который содержит данные: {} любого типа...

Надеюсь, что это немного поможет, обратите внимание, что все в действие здесь

Ответ 2

Существует одна проблема с вашим конструктором и $inject - они должны соответствовать друг другу

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

Что произошло на самом деле - все параметры были перемещены по смыслу, что $http был $scope на самом деле и т.д....

Просто массив $inject ДОЛЖЕН соответствовать списку параметров конструктора

Кстати, почему я ранее здесь: fooobar.com/questions/552663/... предложил использовать типы в объявлении:

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

Ответ 3

Библиотека Bindable TS является альтернативным способом настройки привязки данных с помощью typescript.

Ответ 4

Из быстрого обзора вашего кода я обнаружил, что метод search контроллера является закрытым. Может быть, его изменение на публике решит проблему.