ng-click未将值发送到角度控制器

Question

我有一个表单，并试图将输入的值发送到角度控制器，但单击时，控制器中的值显示为undefined。html代码

<div ng-if="questioncode == 2" class="user-form">
          <div class="row">
          <form>
            <div class="col-sm-12">
              <label class="control-label" >Phone number</label>
            </div>
              <div class="col-sm-12">
                <input  type="text" class="form-control" name="phone" placeholder="your phone number" ng-model="phone">
              </div>
              <div class="col-sm-12">
                 <input  type="submit" class=" col-sm-12 btn btn-primary" ng-click="submituserPhone();"  >
                 <flash-message   duration="3000" show-close="true" on-dismiss="myCallback(flash);" ></flash-message>
              </div>
              </form>
          </div>
       </div>

角度控制器

  $scope.submituserPhone = function() {
console.log($scope.phone);
  $http.post('insertphone',$scope.phone),then(function() {
    if(response.data.status === false) {
      Flash.create('danger',response.data.message);
    }else{
      $scope.questioncode = 3;
    }
  })


 }

Answer 1

所以问题出在ng-if，它创建了一个新的作用域，因此作用域变量phone在控制器中没有更新。这里有两种方法来解决这个问题。

使用$parent的：

您可以使用$parent来更新父作用域的变量，而不是当前的变量，然后您的变量将在控制器中可见。

​

var app = angular.module('myApp', []);

app.controller('MyController', function MyController($scope) {
  $scope.questioncode = 2;
  $scope.submituserPhone = function() {
    console.log($scope.phone);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
  <div ng-if="questioncode == 2" class="user-form">
    <div class="row">
      <form>
        <div class="col-sm-12">
          <label class="control-label">Phone number</label>
        </div>
        <div class="col-sm-12">
          <input type="text" class="form-control" name="phone" placeholder="your phone number" ng-model="$parent.phone">
        </div>
        <div class="col-sm-12">
          <input type="submit" class=" col-sm-12 btn btn-primary" ng-click="submituserPhone();">
          <flash-message duration="3000" show-close="true" on-dismiss="myCallback(flash);"></flash-message>
        </div>
      </form>
    </div>
  </div>
</div>

​

将变量作为参数传递：

您可以简单地将创建的作用域的变量传递给控制器函数并在那里更新它，如下所示。

​

var app = angular.module('myApp', []);

app.controller('MyController', function MyController($scope) {
  $scope.questioncode = 2;
  $scope.submituserPhone = function(phone) {
    $scope.phone = phone;
    console.log($scope.phone);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
  <div ng-if="questioncode == 2" class="user-form">
    <div class="row">
      <form>
        <div class="col-sm-12">
          <label class="control-label">Phone number</label>
        </div>
        <div class="col-sm-12">
          <input type="text" class="form-control" name="phone" placeholder="your phone number" ng-model="phone">
        </div>
        <div class="col-sm-12">
          <input type="submit" class=" col-sm-12 btn btn-primary" ng-click="submituserPhone(phone);">
          <flash-message duration="3000" show-close="true" on-dismiss="myCallback(flash);"></flash-message>
        </div>
      </form>
    </div>
  </div>
</div>

​