Javascript 将指令转换为typescript时扩展$scope

我想将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();
  }

  }

---

但这感觉像是一个黑客。。有更干净的方法吗？

我的方法是创建自定义的范围定义（即inteface），例如：

控制器构造函数现在需要该接口

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

请参阅此处的更多信息：

---

我的做法是创建自定义的范围定义（即inteface），例如：

控制器构造函数现在需要该接口

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

请参阅此处的更多信息：

---

我看不出这有什么问题，只是在这种情况下，您的

loadData

方法不应该是公共的。但我要做的是使用“控制器作为”方法：

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>

负载

我看不出这有什么问题，只是在这种情况下，您的

loadData

方法不应该是公共的。但我要做的是使用“控制器作为”方法：

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>

负载

这不是黑客攻击。通常在javascript中，您在“构造函数”上执行此操作，在

构造函数中的typescript中也执行此操作，尽管您不应该将
loadData
方法公开，但如果您只想将其分配给
$scope
extendScope
是冗余的，它与
angular.extend（this.$scope，this）一样简单
或
Object.assign（this.$scope，this）
（考虑到所有
this
方法都是箭头并保留其上下文）。它应该感觉像黑客，因为它是黑客，正确的方法是
controllerAs
。这不是黑客。通常在javascript中，您在“构造函数”上执行此操作，在
构造函数中的typescript中也执行此操作，尽管您不应该将
loadData
方法公开，但如果您只想将其分配给
$scope
extendScope
是冗余的，它与
angular.extend（this.$scope，this）一样简单
或
Object.assign（this.$scope，this）
（考虑到所有
this
方法都是箭头并保留其上下文）。它应该感觉像一个黑客，因为它是一个黑客，正确的方法是
controllerAs
。我知道controllerAs将解决这个问题，但我将不得不触摸html页面，这将增加范围，我现在不想触摸html…我知道controllerAs将解决这个问题，但是接下来我将不得不触摸html页面，这将增加范围，我现在不想触摸html…好的，我使用了非函数属性的示例-在
IMyScope
上定义。。现在我调整了这个例子。。希望能有点帮助。但是我不会使用
$scope.loadData
，而是
$scope.Ctrl.loadData…
。因此，在template
ng中单击=“Ctrl.loadData（）”
这是我想到的解决方案，但感觉像是一个黑客：（在这种情况下，“本机解决方案”是什么？
controllerAs
和模板内部引用
Ctrl.methods（）
…使用组合
bindToController
您几乎有ng2行为…无论如何，祝您好运，使用Typescript和Angular；）好的，我使用了示例，其中包含了在
IMyScope
上定义的非函数属性。。现在我调整了这个例子。。希望能有点帮助。但是我不会使用
$scope.loadData
，而是
$scope.Ctrl.loadData…
。因此，在template
ng中单击=“Ctrl.loadData（）”
这是我想到的解决方案，但感觉像是一个黑客：（在这种情况下，“本机解决方案”是什么？
controllerAs
和模板内部引用
Ctrl.methods（）
…使用组合
bindToController
您几乎拥有ng2行为…无论如何，祝您在Typescript和Angular方面好运；）