如何使用 TypeScript Controller & 绑定数据角JS [英] How To bind data using TypeScript Controller & Angular Js
问题描述
我正在使用 Type Script.我已将我的 angular js 控制器转换为 Type Script 但我在 ng-repeater 中遇到了问题.(我在下面附上了我的控制器代码:-
class CustomCtrl{公众客户;公共票;公共服务;公共 cust_File;公共票_文件;公共服务_文件;静态 $inject = ['$scope', '$http', '$templateCache'];构造函数(私人 $http,私有 $templateCache){}
我决定添加另一个答案,描述如何在 TypeScript
和注入中创建和使用控制器的更多细节将其转换为 angularJS
.
这是这个答案的扩展
如何使用 TypeScript 定义我的控制器?我们还有 一个工作的plunker
所以有了这个指令:
导出类 CustomerSearchDirective 实现 ng.IDirective{公共限制:字符串=E";公共替换:boolean = true;公共模板:string = ""+"<输入 ng-model=\"SearchedValue\"/>"+"<button ng-click=\"Ctrl.Search()\" >Search</button>"+"<p> 用于搜索值 <b>{{SearchedValue}}</b> " +我们发现:<i>{{FoundResult}}</i></p>"+"</div>";公共控制器:字符串 = 'CustomerSearchCtrl';公共控制器为:字符串 = 'Ctrl';公共范围 = {};}我们可以看到,我们声明该指令可用作 E 元素.我们还内联了一个模板.此模板已准备好绑定 SearchedValue
并在我们的控制器 Ctrl.Search()
上调用 Action.我们说的是控制器的名称是什么:'CustomerSearchCtrl' 并要求运行时将其设为 'Ctrl' (conrollerAs:)
最后我们将该对象注入 angular 模块:
app.directive("customerSearch", [() => new CustomerSearch.CustomerSearchDirective()]);
我们可以将 $scope
用作 ng.IScope
,但要对其进行更多类型的访问,我们可以创建自己的接口:
导出接口 ICustomerSearchScope 扩展了 ng.IScope{SearchedValue:字符串;发现结果:字符串;Ctrl:客户搜索Ctrl;}
这样,我们知道,我们有字符串 SearchedValue
和其他字符串 FoundResult
.我们还通知应用程序 Ctrl 将被注入到该范围内,并且类型为 CustomerSearchCtrl
.控制器来了:
导出类 CustomerSearchCtrl{静态 $inject = ["$scope", "$http"];构造函数(受保护的 $scope:CustomerSearch.ICustomerSearchScope,受保护的 $http: ng.IHttpService){//去做}公共搜索():无效{这个.$http.get("data.json").then((响应:ng.IHttpPromiseCallbackArg) =>{var data = response.data;this.$scope.FoundResult = 数据[this.$scope.SearchedValue]||数据[默认"];});}}
加上它在模块中的注册
app.controller('CustomerSearchCtrl', CustomerSearch.CustomerSearchCtrl);
这个控制器有什么有趣的地方?它有一个公共行为搜索,它可以通过 this.
访问其所有成员,例如this.$http
.因为我们在VS中指示了intellisense那个angular.d.ts类型/接口
protected $http: ng.IHttpService
将被使用,我们以后可以轻松访问它的方法.类似的是.then()
中返回值的类型.then((response: ng.IHttpPromiseCallbackArg) => {...
其中包含数据:{} 任何类型...
希望对您有所帮助,请在此处操作
I am Playing around with Type Script.I have convert my angular js controller to Type Script But i m facing problem in ng-repeater. (I have attached my controller code below:-
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
){}
解决方案 I decided to add another answer describing more details how to create and use controller in TypeScript
and inject it into angularJS
.
This is extension of this Answer
How can I define my controller using TypeScript? Where we also have a working plunker
So having this 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 = {};
}
We can see, that we declared this directive to be available as Element. We also in-lined a template. This template is ready to bind SearchedValue
and call Action on our controller Ctrl.Search()
. We are saying what is the name of controller: 'CustomerSearchCtrl' and asking runtime to make it available as 'Ctrl' (conrollerAs:)
Finally we inject that object into angular module:
app.directive("customerSearch", [() => new CustomerSearch.CustomerSearchDirective()]);
We can use $scope
as ng.IScope
, but to have more typed access to it, we can create our own interface:
export interface ICustomerSearchScope extends ng.IScope
{
SearchedValue: string;
FoundResult: string;
Ctrl: CustomerSearchCtrl;
}
This way, we know, that we have string SearchedValue
and also other string FoundResult
. We also informed the application that Ctrl will be injected into that scope, and will be of type CustomerSearchCtrl
. And here comes that controller:
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 its registration into module
app.controller('CustomerSearchCtrl', CustomerSearch.CustomerSearchCtrl);
What is interesting on this controller? it has one public acton Search, which has access to all its membes via this.
, e.g. this.$http
. Because we instructed intellisense in VS that angular.d.ts type/interface
protected $http: ng.IHttpService
will be used, we can later easily access its methods. Similar is the type of returned value in .then()
.then((response: ng.IHttpPromiseCallbackArg<any>) => {...
which does contain data: {} of any type...
Hope it helps a bit, observe that all in action here
这篇关于如何使用 TypeScript Controller & 绑定数据角JS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文