如何綁定數據使用TypeScript控制器和Angular Js

我正在玩類型Script.I已經轉換我的角度js控制器類型腳本但我在ng中繼器面臨問題。（我附上下面我控制器代碼： -如何綁定數據使用TypeScript控制器和Angular Js

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

來源

2015-05-28 Shian JA

所以，我檢查/固定plunker，http://plnkr.co/edit/3XORgParE2v9d0OVg515?p=preview它應該工作，並顯示所有在行動..希望它可以幫助 –

偉大的幫助！ Thanksssss @RadimKöhler –

我決定添加描述更多的細節如何創建和使用控制器中的另一個答案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。我們還插入了模板。此模板已準備好綁定SearchedValue，並調用我們的控制器上的操作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; 
}

這樣，W我知道，我們有字符串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。因爲我們在VS指示智能感知是angular.d.ts鍵入/接口

protected $http: ng.IHttpService

將被使用，我們稍後可以輕鬆地訪問它的方法。類似的是返回值的.then()

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

其中確實包含數據類型：任何類型的{} ...

希望它可以幫助一點，觀察到所有action here

來源

2015-05-28 12:48:46

如果這有幫助...很好。享受TypeScript和AngularJS的驚人組合（版本2.0將更好;） –

科勒獲得狀態爲400 –

崛起的新問題，將是我的建議。延伸這些已經解決了，這沒有意義。你會得到更多的觀衆...和更高的概率得到答案.. –

-1

從你的代碼的快速回顧我發現控制器的search方法是私有的可能是將其更改爲市民解決問題

來源

2015-05-28 09:06:29 Mikalai

Nups問題仍然相同 –

有。一個問題與你的構造和$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) 
    { ... }

來源

2015-05-28 09:28:38

感謝您的好建議，但與此同樣的問題也一樣。 –

你提供什麼錯誤？你能把它放在問題中嗎？ –

科勒我已經創建了兩個sepearte文件作爲我的控制器，第二個模塊代碼由您提供，但它給了我ng的錯誤沒有找到我已附加一個JPEG格式的我的問題 –

庫Bindable TS是使用typescript設置數據綁定的另一種方法。

來源

2016-09-04 03:35:05

如何綁定數據使用TypeScript控制器和Angular Js

回答

相關問題