ng-click doesn't fire my method

Question

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.

It seems you are missing ng-app directive. Add this directive to body like <body ng-app> — Satpal
Hmm - I'm not a typescript guy but I sure login is on the $scope? If not it wouldn't fire.. what happens if you console.log($scope)? is vm. login there? — alonisser
@Satpal do I need to put ng-app directive in every "view" even if I'm using the $routeProvider ? because I read somewhere that if I put it only on the index, the others won't need it. I might be wrong — spaghettifunk
@alonisser actually I got some errors --- TypeError: Object doesn't support property or method 'login' at AuthenticationController (localhost:8000/SPA/App/scripts/Application.js:563:17) at invoke (localhost:8000/SPA/App/scripts/libs/vendor/angular.js:3000:18) at instantiate (localhost:8000/SPA/App/scripts/libs/vendor/angular.js:3012:7) --- what should I do ? — spaghettifunk
If you have directive in index.html, then you should use partial template. — Satpal

spaghettifunk spaghettifunk · Accepted Answer · 2014-01-30T12:50:02

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.

ng-click doesn't fire my method

2 Answers