Question

我在使用Angular JS从表单中获取值时遇到问题。验证效果很好，但我对控制器或提交功能做错了。

这是我目前的代码：

HTML

<div ng-controller="LoginController as loginCtrl" >
  <h1>LOGIN</h1>

  <form name="loginForm" ng-submit="loginForm.$valid && loginCtrl.loginCheck()" novalidate>
    <input type="email" name="email" placeholder="Email" ng-model="login.email" required />
    <input type="password" name="password" placeholder="Password" ng-model="login.password" ng-minlength="8" required />
    <button type="submit" class="right">LOGIN</button>
  </form>

</div>

Angular JS

app.controller('LoginController', function(){

  this.loginCheck = function(){
    console.log(login.email);
  };

});

目前我只是想在控制台中记录表单结果，但是我收到以下错误：

ReferenceError: login is not defined...

Answer 1

您需要注入$scope服务，而不是使用this。

改为：

app.controller('LoginController', function($scope){
  $scope.login = {};

  $scope.loginCheck = function(){
    console.log($scope.login.email);
  };

});

John Papa推荐了一种方法，您可以使用this创建控制器方法。但是，我个人确实看到了偏离标准的好处，但是你想在这里阅读更多关于这种方法的文章解释它：

http://www.johnpapa.net/angularjss-controller-as-and-the-vm-variable/

Answer 2

您没有controllerAs的正确语法。正如另一个答案所暗示的那样，美元范围和控制器都不是“标准”。两者都有效。

使用您的代码查看下面的示例，但我不确定您是否打算将提交按钮调用为方法...但这很容易扩展。

HTML

<div ng-controller="LoginController as loginCtrl" >
  <h1>LOGIN</h1>

  <form name="loginForm" ng-submit="loginForm.$valid && loginCtrl.loginCheck()" novalidate>
    <input type="email" name="email" placeholder="Email" ng-model="loginCtrl.email" required />
    <input type="password" name="password" placeholder="Password" ng-model="loginCtrl.password" ng-minlength="8" required />
    <button type="submit" class="right">LOGIN</button>
  </form>

</div>

Angular JS

app.controller('LoginController', function(){
  var vm = this;
  vm.email = '';
  vm.loginCheck = function(){
    console.log(vm.email);
  };

});

使用Angular JS获取表单值

2 个答案: