点击不会触发我的方法

我正在为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

链接地址: http://www.djcxy.com/p/77603.html

上一篇: click doesn't fire my method

下一篇: direct access to url with hash