Question

我对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: '/' });
        });
}

可能我也对这些东西在这里如何运作感到困惑。提前谢谢。

Answer 1

基本上问题是我将此代码添加到我的HTML文件

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

并且控制器无法启动我的方法。我也意识到，如果我将控制器添加到

angular.module(...).controller(...)

我不需要将 ng-controller 添加到HTML文件中。有了这两件事， login（）方法被ng-click激活了。无论如何，谢谢你的帮助。

Answer 2

如评论中所述，您缺少ng-app

此外，您注册的控制器名称.controller('authenticationController', AuthenticationController)应与ng-controller ng-controller="AuthenticationController"中的名称相匹配

我会同时制作AuthenticationController

ng-click不会触发我的方法

2 个答案: