Angular+TypeScript - pass parameter from view to controller

Question

I am using AngularJS with TypeScript and now I need to pass a parameter from view to controller. This is the way how I am trying to do it (via ng-init):

<div class="col-md-9" ng-controller="MapIZSController" ng-init="init('IZS')">

"IZS" value should be passed to controller. The controller looks like:

export class MapIZSController
{
    static $inject = ["$scope", "leafletData"];
    private m_scope: IMapIZSScope;
    private m_leafletData;

    constructor($scope: IMapIZSScope, leafletData)
    {
        // the first way I tried
        $scope.init = function (type) {
            console.log("type is: " + type);
        };
        // the second way I tried
        $scope.init = this.init;
    }

    public init = (init: any) => {
        console.log("init is: " + init)
    }

My problem is that I would like to obtain a type but

the first way is never called and
the second too.

Can you give me some advice please?

this *may* work, but this is not [the intended use for `ng-init`](https://docs.angularjs.org/api/ng/directive/ngInit). "This directive can be abused to add unnecessary amounts of logic into your templates. There are only a few appropriate uses of `ngInit`, such as for aliasing special properties of `ngRepeat`...". `ng-init` is a directive, with a priority, which means it may not execute in the order you expect, and you may be relying upon data which hasn't been made available yet. — Claies, Oct 07 '15 at 16:24

score 3 · Accepted Answer · answered Oct 07 '15 at 16:20

I'd say that you are on the right track. There is a working plunker

This could be the a bit simplified controller:

namespace MyNamespace 
{   
  export class MapIZSController
  {
    static $inject = ["$scope", "leafletData"];
    private m_scope: IMapIZSScope;
    private m_leafletData;

    private _type;
    constructor($scope: IMapIZSScope, leafletData)
    {
        // // the first way I tried
        // $scope.init = function (type) {
        //     console.log("type is: " + type);
        // };
        // // the second way I tried
        // $scope.init = this.init;
    }

    public init = (type: any) => {
        this._type = type
        console.log("type is: " + this._type)
    } 
  }
}

and this way we can call init it:

<div class="col-md-9" 
  ng-controller="MapIZSController as ctrl" 
  ng-init="ctrl.init('IZS')">
</div>

So, we use controllerAs approach and do have access to controller via ctrl. ... and that way call ctrl.init()

Check it here

Thank you. But what about if I need to know what type it is already in constructor? Is this possible? — Jan Bouchner, Oct 07 '15 at 16:41
In general, if you need to pass some values to your controller (during creation) - use native angular approach - directive. Here you can define properties of your $scope (or directly bound it to ctrl.) and access them even in constructor (or at least hook on some $watches till they are resolved). check this Q & A with working example - http://stackoverflow.com/q/32993497/1679310 — Radim Köhler, Oct 07 '15 at 16:45
And also here http://stackoverflow.com/q/30482138/1679310 ;) hope these hints will help ... — Radim Köhler, Oct 07 '15 at 16:46

Angular+TypeScript - pass parameter from view to controller

1 Answers1