点击不会触发我的方法
我正在为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