javascript - 对 Angular JS 中按钮的 Javascript 的简单调整

Question

我们如何更改以下代码以使其在单击按钮时起作用。截至目前，它已配置为提交按钮，但该按钮不是。

按钮:

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

Controller :

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

Answer 1

为了运行“form.submit”函数中当前存在的代码，您需要更改 jQuery 选择器和它绑定(bind)的事件，或者将登录信息包装在表单中，并更改您的按钮提交按钮:

<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() {

有关“on”事件处理程序的更多信息:https://api.jquery.com/on/