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>

ng-click不会向角度控制器发送值

1 个答案: