CODEWITHSUNDEEP
javascripttwitter-bootstrapangularjs
jrthib
jrthib

Reputation: 1319

How can I get ui-keypress working in my Angular JS app?

My app has a login form consisting of a username, password, and a button to click to log in. However, for some reason I just can't get ui-keypress to work on the login button. I'm using ui-bootstrap and ui-utils. ui-utils has the keypress directive included.

Here's what I have so far:

My login partial:

<div id="loginForm">

    <img id="logo" src="img/login_logo.png"/>

    <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">
        {{alert.msg}}
    </alert>

    <input type="text" id="username" ng-model="username" placeholder="Username"/>
    <input type="password" id="password" ng-model="password" placeholder="Password"/>

    <button type="button" id="loginBtn" class="btn btn-primary" ng-model="loginModel" ng-click="login()" ui-keypress="{13:'keypressLogin($event)'}">
        Login
    </button>

</div>

My login controller: 

ClutchControllers.controller("LoginController", [

'$scope', 
'$http', 
'$location',
'$cookieStore',
'Auth', 

function($scope, $http, $location, $cookieStore, Auth) {

    // Redirect if already logged in
    if(Auth.isLoggedIn()) {
        $location.path('/dashboard');
    }

    $scope.alerts = [];

    $scope.closeAlert = function(index) {
        $scope.alerts.splice(index, 1);
    }

    $scope.login = function() {

        Auth.login({
            username: $scope.username,
            password: $scope.password
        }, function(err, user) {
            if(err) {
                console.log(err);
                $scope.alerts = [err];
            } else {
                console.log(user);
                console.log(Auth.isLoggedIn());

                //this this if you want to change the URL and add it to the history stack
                $location.path('/dashboard');
            }
        });

    }

    $scope.keypressLogin = function($event) {
        console.log($event);
        console.log($scope.username);
    }

}
]);

And finally, my app routing:

angular.module('myApp', [ 
'ngCookies', 
'ui.utils', 
'ui.bootstrap',
'ui.utils',
'clutch.services', 
'clutch.controllers' 
])
.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider) {

$routeProvider
    .when('/login', {
        controller: "LoginController",
        templateUrl: "partials/login.html",
        auth: false
    })
    .when('/dashboard', {
        controller: "DashboardController",
        templateUrl: "partials/dashboard.html",
        auth: true
    })
    .otherwise({ redirect: "/login" });

}]);

ClutchControllers = angular.module('clutch.controllers', ['ui.bootstrap']);
ClutchServices = angular.module('clutch.services', ['ngResource']);

Upvotes: 0

Views: 6218

Answers (2)

skeep
skeep

Reputation: 940

Just a thought, why would you want to use ui-keypress. IMHO using a form is better solution in this case. Consider this...

<form ng-submit="login()">
  <input type="text"/>
  <input type="password"/>
  <button type="submit">Login</button>
</form>

Upvotes: 5

Langdon
Langdon

Reputation: 20063

Taking a wild guess -- you've got the ui-keypress attribute on your button and not your two input tags..

Took me a bit to reproduce in jsfiddle w/ all your dependencies: http://jsfiddle.net/tuv45/

Upvotes: 1

Related Questions