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

我正在尝试按照这篇文章Can you pass parameters to an AngularJS controller on creation?的方式做些事情，但是在typescript而不是javascript中开发。将参数传递给Typescript中的AngularJS控制器

所以，如果我有我的看法是这样的控制器参考：

<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或通过直接将参数传递给构造函数？

编辑：这里是我想出了尝试性解决方案，但它似乎是构造函数初始化之前调用：

查看：

<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]);

}

来源

2016-01-30 user517406

你能分享配置指令的功能吗？这就是你应该配置范围属性的地方（类似于你在js中做的方式）。 – toskv

我想从视图中传递一个特定的附加参数，而不是我在代码示例 – user517406

中的构造函数中显示的参数啊，不，您无法直接将参数发送到控制器。你需要一个指令来定义它的范围。 – toskv

这里是我使用的方法。我在国家决心中做到这一点。我假设你使用的是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) { 

    } 
    }

很明显，让您的控制器变得纤细，而且是非常可测试的。这是我推荐的解决方案。

来源

2016-01-30 23:08:11

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

回答

相关问题