AngularJS function call

Question

I'm new to Angular and I'm trying to make a basic login page. Ive used a routing table to get to a page (login.html) and assigned it its controller (LoginController). However, I cant seem to be able to call the login function from the login.html page.

this is my controller

 function LoginController($scope, Bank_Factory) {

    $scope.people = [];

    function init(){
        $scope.people  = Bank_Factory.getUsers();
    }
    init();

    $scope.order = function (var_name) {
        $scope.sort_by = var_name;
        $scope.reverse = !$scope.reverse;
    }

    $scope.Login = function () {
         $window.alert("Hi");
    }
}

LoginController.$inject = ['$scope', 'Bank_Factory'];
angular.module('Bank').controller('LoginController',LoginController);

and the login page

<p> Welcome to the login page </p>

<form>
UserName: <input type="text" ng-model = "input_name" />
Password: <input type="password" ng-model="input_pass" />
<button ng-click="Login()">Login</button>
</form>

this is the routing table that links the login.html page and LoginController

var app = angular.module('Bank', ['ngRoute']);

app.config( function ($routeProvider){


 $routeProvider
    .when('/',{
        controller: MainController,
        templateUrl: 'app/views/Main.html'
    })
    .when('/user/:id',{
        controller: UserController,
        templateUrl: 'app/views/user.html'
    })
    .when('/login',{
        controller: LoginController,
        templateUrl: 'app/views/login.html'
    })
    .otherwise({redirectTo:'/'});
});

my main page to display it all

<!DOCTYPE html>
<html lang="en-US" ng-app = 'Bank'>
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
</head>
<body>


<div ng-view></div>

<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="app/app.js"></script></body>
<script src="app/services/BankFactory.js"></script>
<script src="app/controllers/MainController.js"></script>
<script src="app/controllers/UserController.js"></script>
<script src="app/controllers/LoginController.js"></script>


</html>

I've tried LoginController.Login(), $scope.Login() and Login() but none of them seem to reach the function. Please help :(

the Logic Controller is linked to it in the routing table that i posted above. — Irtza.QC
– Irtza.QC, Commented Aug 31, 2015 at 12:41
did you include controller js file on html page ? and you should give ng-controller="LoginController" on html — A.T.
– A.T., Commented Aug 31, 2015 at 12:43
Are you getting any errors? And could you show us how you have your ng-view set up? You may not be loading your controller correctly to your page from your $routeProvider. — brae
– brae, Commented Aug 31, 2015 at 12:44
You must have errors in your console, could you press F12 and check it? — sp00m
– sp00m, Commented Aug 31, 2015 at 12:50

Omri Aharon · Accepted Answer · 2015-08-31 13:26:27Z

1

Nothing happens because you haven't injected $window to your controller. Notice your function:

$scope.Login = function () {
     $window.alert("Hi");
}

So add the $window as a dependency to your controller:

LoginController.$inject = ['$scope', '$window', 'Bank_Factory'];
function LoginController($scope, $window, Bank_Factory) { ... }

answered Aug 31, 2015 at 13:26

Omri Aharon

17.1k5 gold badges43 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS function call

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related