带有打字稿控制器的角度答案

【问题标题】：Angular with typescript controller带有打字稿控制器的角度
【发布时间】：2016-03-08 13:43:18
【问题描述】：

我正在使用 Angular + Typescript + RequireJS。在我配置完所有设置后，简单的 ng-click 对我不起作用，并且错误日志中没有错误。

你们知道我做错了什么吗？任何帮助将不胜感激

我的文件：

index.html

<html>
<head>

</head>
<body>
    <div ng-controller="MasterController">
        <button ng-click="toggleModal()">777777777777</button>
    </div>
    <script src="Script/lib/require.js" type="text/javascript" data-main="Script/main.js"></script>
</body>
</html>

Controllers.ts

/// <reference path="../lib/typings/angular.d.ts" />
/// <reference path="../lib/typings/jquery.d.ts" />

import angular = require("angular");

export var controllerModule = angular.module("controllers", []);

MasterController.ts

/// <reference path="../lib/typings/angular.d.ts" />
/// <reference path="../lib/typings/require.d.ts" />
/// <reference path="controllers.ts" />

import MasterControllerModule = require("Controllers");
class MasterController {

    modalShown: boolean = true;
    constructor() {
    }

    toggleModal() {
        alert(777);
        this.modalShown = !this.modalShown;
    }

}
MasterControllerModule.controllerModule.controller("MasterController", MasterController);

main.js

require.config({

    paths: {

        'angular': 'lib/angular',
        'domReady': 'lib/domReady',
        'app': 'app',
        'Jquery': 'lib/jquery'
    },
    //waitSeconds: 0,
    shim: {
        'angular': {
            exports: 'angular'
        }
    },

    deps: [
        // kick start application... see bootstrap.js
        './bootstrap'
    ]
});  

 require([
  'angular',
  'app',
  'domReady',
  'controllers/Controllers',
  'controllers/MasterController',
  'Jquery'
])

app.js

define(['angular',
'controllers/Controllers'], function (angular) {
    return angular.module('app', ['controllers']);
});

bootstrap.js

define([
    'require',
    'angular',
    'app'
], function (require, ng) {
    'use strict';

    require(['domReady!'], function (document) {
        ng.bootstrap(document, ['app']);
    });
});

【问题讨论】：

您是否检查过脚本是否正在加载，例如 Chrome 开发工具？
在角度提示中我看到这个错误：模块已创建但从未加载

标签： angularjs typescript requirejs

【解决方案1】：

我认为问题出在控制器类中。当您使用指令ng-click 时，它会尝试执行查看控制器$scope 内部的功能。

您定义的类不会注入该依赖项，并且不会对$scope 执行任何操作；这就是为什么没有任何工作的原因（在$scope 中没有称为toggleModal 的方法。您可以像这样导入$scope：

class MasterController {

    modalShown: boolean = true;
    static $inject = ['$scope']
    constructor($scope) {
        $scope.ctrl = this
    }

    toggleModal() {
        alert(777);
        this.modalShown = !this.modalShown;
    }
}

如果您创建 ctrl 范围对象，那么在您的视图中，您需要像这样调用它

<button ng-click="ctrl.toggleModal()">777777777777</button>

观看来自 Bresarat Ali youtube 频道的 this 视频了解更多信息。

【讨论】：

【解决方案2】：

使用控制器作为语法：

<div ng-controller="MasterController as vm">

然后像这样调用click方法：

vm.toggleModal()

【讨论】：