在TypeScript中将参数传递给AngularJS控制器。

19 浏览
0 Comments

在TypeScript中将参数传递给AngularJS控制器。

我试图做类似于这篇帖子Can you pass parameters to an AngularJS controller on creation?的事情，但是使用的是TypeScript而不是JavaScript进行开发。

所以，如果我的视图中有一个对控制器的引用，如下所示：





我的TypeScript控制器有一个如下所示的构造函数：




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之前被调用：


视图：








队伍对象：




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 {
        //属性
        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(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);
        }
        //方法
        init(teamName: string): void {
            this.scope.t = teamName;
        } 
    }
    angular.module("app")
        .controller("teamController", ['dataAccessService', '$http', '$scope', '$location', '$translate', '$window',
            '$localStorage', TeamController]);




															

							

															

						

						
0

					

				


			


			
			

	

		

			

				1
				答案			


					


		
		

			
				
											


	

		

			

								
									
			

			

				

					

						

                        

						

														0 Comments						

					

					

															

				

				

										
在AngularJS中，我们经常需要将参数传递给控制器。以下是一种常见的方法，可以在TypeScript中实现这一目的。假设你正在使用ui-router而不是Angular默认的路由。


首先，在模块的配置中，定义一个状态（state），并在resolve中传递参数：




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) {
    }
  }





这种方法非常清晰，可以保持控制器的简洁性，并且非常适合进行测试。这是我推荐的解决方案。

									

				

									

			

			
0