click doesn't fire my method

2018-06-27 18:21:34

I'm getting crazy about how AngularJS + Typescript work together. Basically what I want to achieve is a simple call to a method. The problem is that I have to use a certain kind of "architecture" and I don't know where I made the mistake.

this is my interface (IAthorizathionScope.ts):

module Main {
    export interface IAuthorizationScope extends ng.IScope {
        vm: AuthenticationController;
        login: (username: string, password: string) => void;
    }
}

this is my controller (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!");
        }
    }
}

and this is my view (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>

EDIT This is my application file (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: '/' });
        });
}

Probably I'm also confused about how this stuff works here. Thank you in advance.

Basically the problem was that I added this code to my HTML file

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

and the controller couldn't fire up my methods. Also I realised that if I add the controller to the

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

I needn't to add the ng-controller to the HTML file. With those two things, the login() method was fired up by the ng-click. Thank you anyway for your help.

As mentioned in the comment you are missing an ng-app

Additionally the controller name you are registering .controller('authenticationController', AuthenticationController) should match the name in ng-controller ng-controller="AuthenticationController"

I would make both AuthenticationController

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

上一篇: 当$ http被注入工厂时，$ httpProvider拦截器不工作

下一篇: 点击不会触发我的方法