ng-click沒有發送值到角度控制器

Question

我有一個窗體並嘗試將輸入的值發送到角度控制器，但點擊時，控制器中的值顯示爲未定義。 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更新父範圍，而不是當前的變量，那麼你的變量將在控制器內可見。

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>