小编典典

如何使用TypeScript Controller和Angular Js绑定数据

angularjs

我正在使用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
    ){}

阅读 420

收藏
2020-07-04

共1个答案

小编典典

我决定添加另一个答案,以描述更多详细信息,如何在其中创建和使用控制器 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 = {};
}

我们可以看到,我们宣布这个指令可作为 ê 字元素。我们还内联了一个 模板 。此模板已准备好绑定 SearchedValue
并在我们的控制器上调用Action Ctrl.Search() 。我们说的是控制器的名称:“CustomerSearchCtrl”,并要求运行时使其以“ Ctrl”形式提供 (conrollerAs :)

最后,我们将该对象注入角度模块:

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

我们可以使用$scopeas ng.IScope,但是要对其进行更多类型的访问,我们可以创建自己的 接口

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

这样,我们知道,我们有了string SearchedValue以及另一个string
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);

这个控制器有什么有趣的地方?它有一个公共actonSearch,可以通过this.例如访问其所有膜this.$http。因为我们在VS中指示了智能感知,即angular.d.ts类型/接口

protected $http: ng.IHttpService

将被使用,我们以后可以轻松地访问其方法。类似的是返回值的类型.then()

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

其中确实包含数据:任何类型的{} …

希望对您有所帮助,请注意此处所有操作

2020-07-04