0

我的应用程序有一个包含用户名、密码和单击登录按钮的登录表单。但是，由于某种原因，我无法ui-keypress使用登录按钮。我正在使用ui-bootstrap和ui-utils。ui-utils包含按键指令。

这是我到目前为止所拥有的：

我的部分登录：

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

我的登录控制器： 

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);
    }

}
]);

最后，我的应用路由：

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']);
4

2 回答 2

5

只是一个想法，你为什么要使用 ui-keypress。在这种情况下，恕我直言，使用表格是更好的解决方案。考虑这个...

<form ng-submit="login()">
  <input type="text"/>
  <input type="password"/>
  <button type="submit">Login</button>
</form>
于 2013-09-08T03:53:28.890 回答
1

大胆猜测——你的ui-keypress属性是你的button，而不是你的两个input标签。

花了我一点时间在 jsfiddle 中重现你所有的依赖项：http: //jsfiddle.net/tuv45/

于 2013-09-08T03:02:40.383 回答