2016-04-12 23 views
1

如何在點擊按鈕時將以下代碼更改爲正常工作。截至目前,它被配置爲一個提交按鈕,該按鈕不是。非常感謝!對Angular JS中的按鈕進行簡單的調整

BUTTON:

<button class="btn btn-primary" ng-click="login()">Log in</button> 

JAVASCRIPT:

dpd.users.me(function(user) { 
    if (user) { 
    location.href = "/"; 
    } 
    }); 
$('form').submit(function() { 
    var username = $('#username').val(); 
    var password = $('#password').val(); 
    dpd.users.login({username: username, password: password}, function(session, error) { 
    if (error) { 
     alert(error.message); 
    } else { 
     location.href = "/welcome.html"; 
    } 
    }); 
    return false; 
}); 

控制器:

$scope.showLogin = function(val) { 
$scope.loginVisible = val; 
if (val) { 
    $scope.username = ''; 
    $scope.password = ''; 
    } 
}; 

$scope.login = function() { 
dpd.users.login({ 
    username: $scope.username, 
    password: $scope.password 
    }, function(session, error) { 
    if (error) { 
    alert(error.message); 
    } else { 
    $scope.showLogin(false); 
    getMe(); 

    $scope.$apply(); 
    } 
    }); 
    }; 

回答

0

<form ng-submit="login()"><!-- /* input items */ --></form>

使用ng-submit的提交按鈕。避免使用jQuery,並在你的控制器中定義一個$ scope.login函數

+0

感謝您的答覆!我會添加到我的按鈕來使其工作?這裏是我有... 我將控制器添加到上面的帖子中。再次感謝 – IKid

+0

'按鈕上的input type =「submit」'是你需要使它工作的 - 所以你很棒! –

+0

這還有其他的好處,比如在非可選輸入字段中使用html5'required'屬性(在執行$ scope.login()之前檢查那些輸入是否需要填充) –

2

爲了運行'form.submit'函數中當前存在的代碼,你需要改變jQuery選擇器和它的事件綁,或包裹在表單中的登錄信息,並更改按鈕提交按鈕:

<input type="submit" value="Log In" /> 

如果你不想換登錄數據的形式,改變了jQuery如下:

$('form').submit(function() { // this should change to the following 
$('button.btn-primary').on('click', function() { 

你也可以考慮給你的按鈕ID:

<button id="login_button" class="btn btn-primary>Log in</button> 

然後你就可以使用ID爲您的jQuery選擇:

$('#login_button').on('click', function() { 

有關 '對' 事件處理程序的詳細信息:https://api.jquery.com/on/