Question

我想将javascript中的现有指令转换为typescript。我如何转换下面的功能

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

所以我试着把它写成

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

但是它给出了错误，这在课堂上是不可用的。然后我试过

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

但这也行不通。很明显我无法在$ scope上定义一个新的公共属性，但至少我应该可以为它赋值。

那么如何在$ scope上动态添加函数？我能想到的解决方法是创建一个函数extendScope，然后再创建

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

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

  constructor(){
      this.extendScope();
  }

  }

但是这感觉就像是黑客..有没有更干净的方法呢？

Answer 1

我的方式 - 创建自定义范围定义 （即。接口），例如：

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

和Controller构造函数现在需要接口

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 => {
       //.....
    }

在此处查看更多信息：

How To bind data using TypeScript Controller & Angular Js

Answer 2

我认为这没有任何问题，只是在这种情况下你的loadData方法不应公开。我会做的是使用'controller-as'方法：

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

}

在你的HTML中：

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

在将指令转换为typescript

2 个答案: