如何使用 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屋！