it-swarm.com.ru

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

Я играю с Type Script. Я преобразовал свой контроллер angular js в Type Script, но я столкнулся с проблемой в ng-repeater. (Я приложил код моего контроллера ниже: -

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
    ){}
10
Shian JA

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

Это продолжение этого ответа 

Как я могу определить свой контроллер с помощью TypeScript? Где у нас также есть рабочий поршень

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

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

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

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

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

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

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);

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

protected $http: ng.IHttpService

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

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

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

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

4
Radim Köhler

Есть одна проблема с вашим конструктором и $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 ДОЛЖЕН соответствовать списку параметров конструктора

Кстати, вот почему я ранее здесь: https://stackoverflow.com/a/30482388/1679310 предложил использовать типы в объявлении:

   constructor(protected $scope: ICustomerScope,
        protected $http: ng.IHttpService,
        protected $templateCache: ng.ITemplateCacheService)
    { ... }
2
Radim Köhler

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

0
Jack Yum Cha