StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow can I get ui-keypress working in my Angular JS app?
text
Body
copied!<p>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 <code>ui-keypress</code> to work on the login button. I'm using <code>ui-bootstrap</code> and <code>ui-utils</code>. <code>ui-utils</code> has the keypress directive included.</p> <p>Here's what I have so far:</p> <p>My login partial:</p> <p></p> <pre><code><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> </code></pre> <p></p> <p>My login controller: </p> <pre><code>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); } } ]); </code></pre> <p>And finally, my app routing:</p> <pre><code>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']); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload