表单输入未定义

Question

为什么名称和密码未定义？ 我在他们身上使用了 ng-model...

 <form class="login" name="form">
            <div class="form-group" ng-class="{'has-error': isInvalidLogin}">
                <label for="name">Name: </label>
                <input type="text" ng-model="name" id="name" class="form-control" placeholder="Nitzan">
            </div>
            <div class="form-group" ng-class="{'has-error': isInvalidLogin}">
                <label for="password">Password: </label>
                <input type="password" ng-model="password" id="password" class="form-control" placeholder="1234">
                <p class="help-block" ng-if="isInvalidLogin">Name or password are wrong!</p>
            </div>
            <button type="submit" class="btn btn-block btn-lg btn-success login-btn" ng-click="login()">Login</button>
        </form>

在控制器中：

 $scope.login = function () {
        usersService.get($scope.name, $scope.password).then(function success(result){
           $scope.currentUser = result;
        }, function error() {
            $scope.isInvalidLogin = true;
        });
    };

查看 plunker： http://plnkr.co/edit/QD3vtil3w9pd4d1TGl9v?p=preview

Answer 1

您的问题是因为 ng-if 指令从当前范围创建子范围。因此，$scope.login 函数内部未定义 $scope.name 和 $scope.password。

我建议您为user 创建一个对象，该对象最初是空白的，例如user={}，或者您可以使用ng-init 在html 上执行此操作，然后将其放在mainController 中，以便它可以直接访问由父母而不做$parent. 表示法。

并将name 和password 放在用户对象内。

HTML

  <div ng-init="user={}">
    <div class="container login-div" ng-if="!currentUser">
      <form class="login" name="form" ng-submit="login()">
        <div class="form-group" ng-class="{'has-error': isInvalidLogin}">
          <label for="name">Name:</label>
          <input type="text" ng-model="user.name" id="name" class="form-control" placeholder="Nitzan">
        </div>
        <div class="form-group" ng-class="{'has-error': isInvalidLogin}">
          <label for="password">Password:</label>
          <input type="password" name="test" ng-model="user.password" id="password" class="form-control" placeholder="1234">
          <p class="help-block" ng-if="isInvalidLogin">Name or password are wrong!</p>
        </div>
        <button type="submit" class="btn btn-block btn-lg btn-success login-btn">Login</button>
      </form>
    </div>
  </div>

代码

    $scope.login = function () {
        alert("Name "+ $scope.user.name +"& password is " +$scope.user.password)
        //usersService.get($scope.name, $scope.password).then(function success(result){
        //   $scope.currentUser = result;
        //}, function error() {
        //    $scope.isInvalidLogin = true;
        //});
    };

Working Plunkr 在这里。

更新

否则，您需要添加更改您的 ng-model 以将此范围引用到父范围，例如

HTML

姓名ng-model="$parent.name"

密码ng-model="$parent.password"

代码

   $scope.login = function () {
        alert("Name "+ $scope.name +"& password is " +$scope.password)
        //usersService.get($scope.name, $scope.password).then(function success(result){
        //   $scope.currentUser = result;
        //}, function error() {
        //    $scope.isInvalidLogin = true;
        //});
    };

Plunkr Here

希望这可以帮助你。谢谢。