打字稿+角度答案

【问题标题】：Typescript + Angular打字稿+角度
【发布时间】：2013-08-16 02:31:37
【问题描述】：

我正在使用带有 Angular 的 Typescript，如此处所述http://www.youtube.com/watch?v=WdtVn_8K17E

class MyController {
    thescope: any;
    static $inject = ['$scope'];

    constructor($scope) {
        $scope.vm = this;
        this.thescope = $scope;
    }

    ...
}

我想创建这个控制器的一个实例。我必须使用什么作为 $scope 参数？

var mc = new MyController(whatParameterHere?); //

【问题讨论】：

你为什么要自己实例化控制器？ Angular 负责创建控制器并注入依赖项。
我使用了一个 javascript 组件 (jstree)，我有一个 nodeselected 事件，我想在其中调用控制器的函数。也许我的设计有误？
我想你可能会。我不是专家，但我从未实例化我自己的控制器。 Angular 会为你做这件事，同时管理依赖注入。
那我怎样才能从外部调用控制器的方法呢？
过去，我将 JQuery 设置为 Angular 的依赖项并将其传递给控制器。然后我在控制器上创建一个init 函数并将其绑定到ng-init。然后我在 init 函数中创建 jQuery 组件（jstree）。如果 jsTree 有一个事件，那么您应该能够在控制器内连接该事件并调用您希望的任何基于控制器的函数。没有代码，很难给你一个合适的解决方案。

标签： javascript angularjs typescript angularjs-scope

【解决方案1】：

在 AngularJS 中，你的 dom 操作应该放在一个指令中。在您的情况下，您将为 JSTree 创建一个指令。这个答案应该给你一个良好的开端：How to use jsTree events with AngularJS

要了解更多关于指令的信息，这里有一个来自 AngularJS 创建者的精彩视频：https://www.youtube.com/watch?v=WqmeI5fZcho（我会在某个时候制作一个 AngularJS + TypeScript 指令视频）

【讨论】：

我开了一个新问题：stackoverflow.com/questions/18228723/typescript-access-function

【解决方案2】：

如果您正在寻找在控制器和/或指令之间调用的通用方法，请使用服务。

如果您希望操作 dom，请使用指令。

回答你的问题：

module myApp.ctrl {
    myApp.controller("MyController", function($scope) {
        return new MyController($scope);
    }

    class MyController {
        thescope: any;
        static $inject = ['$scope'];

        constructor($scope) {
            $scope.vm = this;
            this.thescope = $scope;
        }

        ...
    }
}

【讨论】：

【解决方案3】：

正如其他人所建议的，你不应该自己做这个，angular会自己做。

但是可以通过将 $scope 作为字符串传入来完成，angular 会为你做 DI，所以你的代码应该是这样的

var mc = new MyController("$scope");

【讨论】：

【解决方案4】：

你应该使用服务而不是控制器，

你可以注入服务并在你的应用程序中调用它的功能。

例如，如果您想从 api 调用数据：

module Data {
    export interface IDataService {
        http:ng.IHttpService;
        fetch:()=>ng.IPromise<string>;
    }
    export class DataService implements IDataService{
        http:ng.IHttpService;

        static $inject = ["$http"];
        constructor($http:ng.IHttpService) {
            this.http = $http;
        }

        fetch():ng.IPromise<string> {
            return this.http.get("link");
        }
    }
}
angular.module("app").service("DataService", Data.DataService);

如果你想使用像 jstree 这样的插件，你应该为此创建一个指令并在其中注入 DataService 并使用你想要的功能。

【讨论】：

【解决方案5】：

通常你会使用一个声明为参数的私有变量来保存注入的 $scope 对象，如下所示：

..

class MyController {
  
  static $inject = ['$scope'];
  constructor(private scope: ng.IScope){
    this.init();  
  }
  
  private init() {
    this.scope.foo = 'bar';
  }
  
}

..

虽然 $inject 语句不是必需的，但它明确指出 $scope 是注入资产:-)

然后，您将创建一个 MyController 的实例，如下所示：

angular.module('app')
  .controller('MyController', MyController);

【讨论】：