在将指令转换为打字稿时扩展$ scope

Question

i want to convert existing directive in javascript to typescript. How do i convert below function

    $scope.loadData = function () {
        $scope.tableParams = $cspagination.initPromise(getPagedData);
    };

So I am trying to write it as

  class controller {
    this $scope.loadData = (): void {
      .....
      .....
    };
  }

but it is giving error that this is not available on class level. then i tried

  class controller {
    public $scope.loadData = (): void {
      .....
      .....
    };
  }

but this also does not work. its obvious that I cannot define a new public property on $scope, but then atleast I should be able to assign value to it.

so how do I dynamically add functions on $scope?? The workaround I could think of is creating a function extendScope and then

   class controller {
    public loadData = (): void => {
      .....
      .....
    };

    private extendScope = (): void =>{
       this.$scope.loadData = this.loaddata;
    }

  constructor(){
      this.extendScope();
  }

  }

but then this feels like a hack.. are there any cleaner ways of doing this?

Answer 1

The way I go - is to create custom scope definition (ie inteface) , eg:

export interface IMyScope  extends ng.IScope
{
    loadData: () => void;
    otherFunction: function;
    ...
    Ctrl: MyCtrl;
}

and Controller constructor now requires that interface

export class MyCtrl
{
    static $inject = ["$scope", ...];
    constructor(protected $scope: IMyScope  ,
        ...)
    {
       this.$scope.Ctrl = this; // we can use "controllerAs" as well
        // and here we can add these functions
       this.$scope.loadData = this.loadData;
       this.$scope.otherFunction = function() {};
       ...
    }

    public loadData = (): void => {
       //.....
    }

See more here:

• How To bind data using TypeScript Controller & Angular Js

Answer 2

I don't see anything wrong with this, only that your loadData method shouldn't be public in this case. What I would do though is use the 'controller-as' method:

class controller {
    static ID = "myController";

    // defining methods like this will make them immediately available on 
    // the controller with the 'controller as' method
    public loadData = (): void => {
        //.....
    }

    constructor(){
    }

}

And in your html:

<div ng-controller="myController as $my">
    <button ng-click="$my.loadData()">Load!</button>
</div>