AngularJS\TypeScript 简单控制器连接答案

【问题标题】：AngularJS\TypeScript Simple Controller connectionAngularJS\TypeScript 简单控制器连接
【发布时间】：2015-09-11 12:34:00
【问题描述】：

我正在尝试在 AngularJS 开发中使用 TypeScript。我是新手，只是想获得一些基本的构建块。我从这个教程开始：http://angularfirst.com/your-first-angular-project-in-visual-studio/

在让它工作后，我尝试将其转换为 TypeScript，这就是我无法建立连接的地方。

我想做的是创建一个可以用作控制器的 TypeScript 类，目前我只是使用一个简单的属性包。一旦我了解了如何让类被读取，然后我将扩展我的控制器。

我的班级是这样的：

class main {
    "use strict";
    public food: string;
    constructor() {
        var vm = this;
        vm.food = "pizza";
    }
}

我的控制器调用如下所示：

(function() {

    angular
        .module("app")
        .controller("Main",
        ["$scope", main]);
});

还有我的 HTML：

<!DOCTYPE html>
<html ng-app="app">
<head>
    <title>Index</title>
    <meta charset="utf-8"/>

</head>
<body ng-controller="Main as vm">

    <input type="text" ng-model="vm.food" placeholder="Enter food" />

    <p ng-show="food">Sriracha sauce is great with {{vm.food}}!</p>

    <script src="Scripts/angular.min.js"></script>
    <script src="app/app.module.js"></script>
    <script src="app/main.js"></script>

</body>
</html>

我的结果是：

Sriracha sauce is great with {{vm.food}}!

我的期望是：

Sriracha sauce is great with pizza!

我尝试将 $scope 传递给构造函数，并尝试了解 $inject 做了什么，但没有让它工作。

我们将不胜感激。我被卡住了，在几个晚上的搜索和游戏中都找不到答案或示例。

谢谢

编辑：我已经单独和一起尝试过 Kim 和 basarat 的 cmets，但两种解决方案都没有改变结果。

我尝试在 Chrome 中调试，但它没有命中构造函数。

在完成示例并尝试了我自己的一些想法和更改之后，这就是我所拥有的。

class main {
"use strict";
public food: string;
constructor() {
    this.food = "pizza";
    //$scope.vm = this;

}
}


(function() {

angular
    .module("app",[])
    .controller("Main", function ($scope) {
        $scope.vm = new main();
    });
});

【问题讨论】：

你试过了吗：angular.module("app",[])？

标签： javascript angularjs typescript

【解决方案1】：

我认为您没有正确构建您的模块。它应该有 [] 使得：

angular.module("app", []).controller("Main", function ($scope) {
     $scope.vm = new main();
});

此外，您需要在控制器而不是您的类中传递一个函数。在你的作用域内，你实例化你的类。

【讨论】：

他实际上也没有调用那个函数。

【解决方案2】：

把当前实例放到$scope上：

class main {
    "use strict";
    public food: string;
    constructor($scope) {
        $scope.vm = this;
        this.food = "pizza";
    }
}

【讨论】：