Question

我正在使用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']);
    });
});

Answer 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视频，了解更多信息。

Answer 2

使用Controller作为语法：

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

然后

调用click方法，如下所示：

vm.toggleModal()

Angular with typescript controller

2 个答案: