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

Question

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

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

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

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

How can I define my controller using TypeScript? Где мы также a working 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. Мы также выложили шаблон . Этот шаблон готов к привязке и вызовите действие на нашем контроллере Ctrl.Search(). Мы говорим о том, что это имя контроллера: «CustomerSearchCtrl» и просим выполнения, чтобы сделать его доступным как «Ctrl» (conrollerAs :)

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

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

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

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

Таким образом, ш e знаю, что у нас есть строка 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 типа/интерфейс

protected $http: ng.IHttpService 

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

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

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

Надеется, что это помогает немного, заметит, что все в action here

Answer 2

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

Answer 3

Существует.. один вопрос с конструктором и $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 
){} 

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

Просто $inject массив должен соответствовать в список параметров конструктора

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

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

Answer 4

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