Question

我正在尝试按照这篇文章Can you pass parameters to an AngularJS controller on creation?的方式做一些事情但是用打字稿而不是javascript开发。

因此，如果我在我的视图中有对这样的控制器的引用：

<div class="row" id="divTeam" ng-app="app" ng-controller="teamsController as vm" ng-cloak>

我的打字稿控制器有一个像这样的构造函数：

constructor(private dataAccessService: app.common.DataAccessService, $http: ng.IHttpService, $scope: app.domain.TeamScope,
            $location: ng.ILocationService, $translate: angular.translate.ITranslateService, $window: ng.IWindowService,
            $localStorage: app.domain.GlobalsScope) {

            this.httpService = $http;
            this.scope = $scope;
...

这是TeamScope：

export interface TeamScope extends ng.IScope {
        selectedTeam: app.domain.Team;

        isBusy: Boolean;
        errorMessage: string;

        language: string;
    }

将参数从视图传递到控制器的正确方法是什么？通过ng-init或将参数直接传递给构造函数？

编辑：这是我提出的尝试解决方案，但似乎在init之前调用了构造函数：

查看：

<div class="container page-content" ng-app="app" ng-controller="teamController as vm" ng-init="vm.init('Arizona')" ng-cloak>

团队对象：

export interface TeamScope extends ng.IScope {
        t: string;
        isBusy: Boolean;
        errorMessage: string;

        language: string;

        init(selectedTeam: string);
    }

控制器：

module app.controllers {

    class TeamController 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;

        httpService: ng.IHttpService;
        scope: app.domain.TeamScope;
        translate: angular.translate.ITranslateService;
        location: ng.ILocationService;
        window: ng.IWindowService;
        localStorage: app.domain.GlobalsScope;

        static $inject = ['dataAccessService', '$http', '$scope', '$location', '$translate', '$window',
            '$localStorage'];

        //constructor
        constructor(private dataAccessService: app.common.DataAccessService, $http: ng.IHttpService, $scope: app.domain.TeamScope,
            $location: ng.ILocationService, $translate: angular.translate.ITranslateService, $window: ng.IWindowService,
            $localStorage: app.domain.GlobalsScope) {

            this.httpService = $http;
            this.scope = $scope;

            alert(this.scope.t);
        }

        //methods
        init(teamName: string): void {
            this.scope.t = teamName;
        } 
    }

    angular.module("app")
        .controller("teamController", ['dataAccessService', '$http', '$scope', '$location', '$translate', '$window',
            '$localStorage', TeamController]);

}

Answer 1

这是我使用的方法。我是在州决心做的。我假设您使用的是ui-router而不是角度默认路由器。

module.config(function($stateProvider) {
    $stateProvider.state('app.team', {
      url: '/team/{name}',
      controller: 'TeamController as TeamVM',
      resolve: {
        team: function($stateParams) {
          return new Team($stateParams.name);
        }
      }
    });
  });

  ...

  class TeamController {
    constructor(public team: Team) {

    }
  }

很明显，让控制器保持纤薄，并且非常可测试。这是我推荐的解决方案。

将参数传递给Typescript中的AngularJS控制器

1 个答案: