Passing parameters to AngularJS controller in Typescript

Question

I am trying to do something along the lines of this post Can you pass parameters to an AngularJS controller on creation? but developing in typescript rather than javascript.

So if I have in my view a reference to a controller like this :

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

And my typescript controller has a constructor like this :

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;
...

And here is TeamScope :

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

        isBusy: Boolean;
        errorMessage: string;

        language: string;
    }

What would be the correct way to pass a parameter from the view into the controller? Through ng-init or by passing a parameter directly into the constructor?

EDIT : Here is the attempted solution I came up with, but it seems like the constructor is called before init :

View:

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

team object:

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

        language: string;

        init(selectedTeam: string);
    }

Controller:

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

}

could you share the function that configures the directive? that's where you should be configuring the scope property (similar to how you'd do it in js). — toskv
– toskv, Commented Jan 30, 2016 at 12:37
I want to pass a specific additional parameter from the view, not the parameters I have shown in my constructor in the code sample — user517406
– user517406, Commented Jan 30, 2016 at 12:37
ah, no, you can't send parameters directly to a controller. you will need a directive to define a scope on it. — toskv
– toskv, Commented Jan 30, 2016 at 12:39
Is there not a typescript equivalent of the ng-init example I made a link to above? — user517406
– user517406, Commented Jan 30, 2016 at 12:41
you can just make a property on your scope and initialize it with ng-init, if that's what you need.. if you'd have a plunker with what you are trying to achieve it would help. :) — toskv
– toskv, Commented Jan 30, 2016 at 12:48

micah · Accepted Answer · 2016-01-30 23:08:11Z

Here is the method I use. I do it in the state resolve. I assume you're using ui-router and not the angular default 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) {

    }
  }

It's clear, keeps your Controllers slim, and is very testable. This is my recommended solution.

Collectives™ on Stack Overflow

Passing parameters to AngularJS controller in Typescript

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related