将$ scope注入TypeScript控制器 [英] Injecting $scope into typescript controller

问题描述

我正在编写我的第一个打字机控制器，并且在理解如何使用$ scope时遇到了一点问题，以便可以引用不同代码块中的元素.这是相关代码:

I am writing my first typescript controller and am having a little bit of an issue understanding how to use $scope so that I can refer to elements within different code blocks. Here is the relevant code :

    module app.controllers {

        class TeamsController implements app.domain.Team {

            //properties
            teamId: number;
            teamName: string;
            coach: app.domain.Coach;
            division: app.domain.Division;
            cheerleaderImage: string;
            coachImage: string;
            headerImage: string;
            logoImage: string;

            divisions: app.domain.Division[];
            coaches: app.domain.Coach[];
            teams: app.domain.Team[];

            selectedTeam: app.domain.Team;
            teamToBeUpdated: app.domain.Team;

            httpService: ng.IHttpService;

            static $inject = ['dataAccessService', '$http', '$scope'];

            //constructor
            constructor(private dataAccessService: app.common.DataAccessService, $http: ng.IHttpService, $scope: ng.IScope) {

                this.teams = [];
                this.divisions = [];
                this.coaches = [];

                this.httpService = $http;

                var teamResource = dataAccessService.getTeamResource();
                var divisionResource = dataAccessService.getDivisionResource();
                var coachResource = dataAccessService.getCoachResource();

                teamResource.query((data: app.domain.Team[]) => {
                    this.teams = data;
                });

                divisionResource.query((data: app.domain.Division[]) => {
                    this.divisions = data;
                });

                coachResource.query((data: app.domain.Coach[]) => {
                    this.coaches = data;
                });

                this.selectedTeam =
                    new app.domain.Team(0, "", new app.domain.Coach(0, ""), new app.domain.Division(0, ""), "", "", "", "");
                this.teamToBeUpdated =
                    new app.domain.Team(0, "", new app.domain.Coach(0, ""), new app.domain.Division(0, ""), "", "", "", "");
            }

    addUpdateTeam(): void {

                if (this.teamToBeUpdated.teamId === 0) {

                    //vm.isBusy = true;
                    //vm.errorMessage = "";

                    //post, pass teamToBeUpdated object
                    this.httpService.post('http://localhost:33201/api/Teams/Add', this.teamToBeUpdated)
                        .then(function (response) {
                            //success
                            this.teams.push(response.data);
                            this.teams.sort(function (a, b) {
                                if (a.teamName.toLowerCase() < b.teamName.toLowerCase()) return -1;
                                if (a.teamName.toLowerCase() > b.teamName.toLowerCase()) return 1;
                                return 0;
                            });
                            this.teamToBeUpdated =
                                new app.domain.Team(0, "", new app.domain.Coach(0, ""), new app.domain.Division(0, ""), "", "", "", ""); //clear form
                        }, function (error) {
                            //failure
                            //vm.errorMessage = "Failed to save new team: " + error;
                        })
                        .finally(function () {
                            //vm.isBusy = false;
                        });
                }
            }
}

    //registration with module must be declared after class
    angular.module("app")
        .controller("teamsController", ['dataAccessService', '$http', '$scope', TeamsController]);
}

在我上面使用 this 的地方，我想用 $ scope 替换它，但是当我尝试这样做时，出现错误'{propertyname}在IScope类型上不存在.

Where I am using this above, I would like to replace it with $scope, but when I try to do that I get the error '{propertyname} does not exist on type IScope'.

有人可以建议如何正确执行此操作吗?

Can anybody advise on how to do this correctly?

推荐答案

您可以创建一个接口，以使用所需的属性扩展ng.IScope.

You can create an interface that extends ng.IScope with the properties you need.

interface TeamsScope extends ng.IScope {
  teams: string[]
}

并在构造函数中使用它代替ng.IScope.

And use that instead of ng.IScope in the constructor.

constructor(private dataAccessService: app.common.DataAccessService, $http: ng.IHttpService, $scope: TeamsScope) {

只能通过 this 访问类中定义的所有属性.

All properties defined in a class can only be accessed trough this.

例如，您可以使用以下一种方法访问 $ scope :

For example you can access $scope in one of the class methods like this:

this.$scope

为了在给$ http服务的处理程序中保留相同的词法范围，可以使用箭头功能.

In order to keep the same lexical scope inside the handler given to the $http service you can use an arrow function.

this.httpService.post('http://localhost:33201/api/Teams/Add', this.teamToBeUpdated)
                        .then((response) => { this.teams = resonse.data});

您可以找到有关箭头函数在这里.

You can find more about arrow functions here.

这篇关于将$ scope注入TypeScript控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！