AngularJSTypeScript简单控制器连接

AngularJSTypeScript Simple Controller connection

本文关键字：连接 控制器 简单 AngularJSTypeScript      更新时间：2023-09-26

我正在尝试在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的评论，两种解决方案都没有改变结果。

我尝试在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", []).controller("Main", function ($scope) {
     $scope.vm = new main();
});

另外，你需要在控制器中传递一个函数而不是你的类。

将当前实例放在$scope上:

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