CODEWITHSUNDEEP
javascriptangularjs
Irtza.QC
Irtza.QC

Reputation: 1136

AngularJS function call

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 :(

Upvotes: 0

Views: 178

Answers (1)

Omri Aharon
Omri Aharon

Reputation: 17064

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) { ... }

Upvotes: 1

Related Questions