点击不会触发我的方法
我正在为AngularJS + Typescript如何协同工作而疯狂。 基本上我想实现的是对一个方法的简单调用。 问题是我必须使用某种“架构”,我不知道我犯了什么错误。
这是我的界面(IAthorizathionScope.ts):
module Main {
export interface IAuthorizationScope extends ng.IScope {
vm: AuthenticationController;
login: (username: string, password: string) => void;
}
}
这是我的控制器(AuthorizationController.ts):
module Main {
'use strict';
export class AuthenticationController
{
public static $inject = [
'$scope',
];
private username: string;
private password: string;
constructor($scope : IAuthorizationScope)
{
$scope.vm = this;
}
login = function (username:string, password:string) {
alert("authorised!");
}
}
}
这是我的观点(secretTest.html):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div ng-controller="AuthenticationController">
<label>Username: <input type="text" ng-model="username"/> </label>
<label>Password: <input type="password" ng-model="password"/> </label>
<button ng-click="vm.login(username, password)">
Login
</button>
</div>
</body>
</html>
编辑这是我的应用程序文件(Application.js)
module Main
{
'use strict';
var txtmobileMvc = angular.module('txtmobileMvc', ['kendo.directives'])
// factories
.factory('Main.ItemCommonModel', function ($rootScope)
{
return new Main.ItemCommonModel($rootScope);
})
// controllers
.controller('detailCollectionController', DetailCollectionController)
.controller('detailController', DetailController)
.controller('gridController', GridController)
.controller('authenticationController', AuthenticationController)
.controller('wijmoController', WijmoController)
// services
.service('itemStorage', ItemStorage)
.service('itemDataService', ItemDataService)
// Page routing
.config(($routeProvider: ng.IRouteProvider) =>
{
$routeProvider
.when('/', { controller: 'detailController', templateUrl: 'views/detail.html' })
.when('/grid', { controller: 'gridController', templateUrl: 'views/grid.html' })
.when('/secret', { controller: AuthenticationController, templateUrl: 'views/secretTest.html'})
.when('/wijmo', { controller: WijmoController, templateUrl: 'views/wijmoTest.html' })
.otherwise({ redirectTo: '/' });
});
}
也许我也对这个东西在这里工作感到困惑。 先谢谢你。
基本上问题是我将这段代码添加到我的HTML文件中
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
而且控制器无法启动我的方法。 此外,我意识到,如果我将控制器添加到
angular.module(...).controller(...)
我不需要将ng控制器添加到HTML文件。 有了这两件事,login()方法就被ng-click启动了。 无论如何,谢谢你的帮助。
正如评论中提到的,你缺少一个ng-app
此外,您正在注册.controller('authenticationController', AuthenticationController)的控制器名称应该与ng-controller ng-controller="AuthenticationController"中的名称匹配
我会使两个AuthenticationController
