angular $scope.variable 未在输入上使用 ng-model 指令进行更新

Question

我正在开发一个 angular 应用程序，用户可以在其中输入他可以设置他的 phone 号码的视图。

 <div class="modal">
      <ion-header-bar  class="actu_header">
      <h1 class="title">Nouvelles Infos</h1>
      <div class="button button-clear" style="width:50px" ng-click="cancel()"><span class="icon ion-chevron-down"></span></div>
    </ion-header-bar>
    <ion-content  class="padding_header modalPhone">
    <h4> Entrez votre numéro de téléphone pour confirmer votre compte</h4>
    <label class="item item-input">
      <span class="input-label"><i class="ion-ios-telephone"></i> </span>
      <input type="tel" ng-model="telephone" placeholder="Entrez votre numero de mobile"/>
    </label>
    <p class="err_container" ng-if="err">{{err}}</p>
    <button ng-click="sendPhoneNumber()" class="button homepage_button icon-right ">
      Valider
  </button>
  </ion-content>
</div>

当用户点击按钮时。它应该将 telephone 数据发送到服务器。这是前面模态所依赖的相关控制器：

    .controller('RegisterCtrl', function($scope, $http, $location, $localStorage,$ionicLoading, $ionicHistory, mySock, user,$cordovaNetwork, $ionicModal){
  $ionicHistory.clearCache();
  $ionicHistory.clearHistory();
  $scope.err = "";
  $scope.user={};
  // $scope.telephone = "";

  $scope.launchModal = function(){
    $ionicModal.fromTemplateUrl('templates/phoneConfirmation.html', {
      scope: $scope,
      animation: 'slide-in-up'
    }).then(function(modal) {
      $scope.modal2 = modal;
      $scope.modal2.show();
    });
  }

  $scope.cancel = function(){
    $scope.goBack(-1);
    $scope.modal2.hide();
  }

  // $scope.telephone = "";

  $scope.sendPhoneNumber = function(){
    console.log($scope.telephone);
    $http.post(serverAddress+'/user/sendConfirmationSms', {telephone: $scope.telephone}).success(function(data){})
  }
  $scope.launchReq = function(){
    if($scope.err)
      delete $scope.err;
    if(window.device && $cordovaNetwork.isOffline()){
      error_reporter.show({texte: "Connectez vous d'abord à internet!"});
    }
    else{
      $ionicLoading.show({
        content: 'Loading Data',
        animation: 'fade-out',
        showBackdrop: false,
        hideOnStateChange: true
      });
      $http.post(serverAddress+'/user/create',$scope.user).success(function(data){
       $localStorage.set('token',data[0].token);
       $localStorage.setObject('user',data[0]);
       $localStorage.setObject('friends',[]);
       user.getCoord();
       mySock.req(serverAddress+'/connexion/setSocket',{id: data[0].id}); //Link socket_id with the user.id
       $location.path('/user/profil');
     }).error(function(err){
      $ionicLoading.hide();
      $scope.err = "Erreur veuillez vérifier que tous les champs sont remplis et que l'adresse mail n'est pas déjà utilisée.";
    });
   }
 }
})

无论我在输入字段中键入什么，打印到控制台的 $scope.telephone 的值始终是一个空字符串。因此，即使我在输入标签上指定了 ng-model="telephone"，telephone 的值实际上并没有发送到服务器。

---更新---

有问题的html和平实际上是通过在registerCtrl中单击具有函数launchModal的元素触发的模态。通过取消我的模式与 RegisterCtrl 的链接并将其链接到一个新的控制器，它终于起作用了：

<div class="modal" ng-controller ="PhoneCtrl">
        <ion-header-bar  class="actu_header">
      <h1 class="title">Nouvelles Infos</h1>
      <div class="button button-clear" style="width:50px" ng-click="cancel()"><span class="icon ion-chevron-down"></span></div>
    </ion-header-bar>
     <ion-content  class="padding_header modalPhone">
    <h4> Entrez votre numéro de téléphone pour confirmer votre compte</h4>
    <label class="item item-input">
      <span class="input-label"><i class="ion-ios-telephone"></i> </span>
      <input type="tel" ng-model="$parent.telephone" placeholder="Entrez votre numero de mobile"/>
    </label>
    <p class="err_container" ng-if="err">{{err}}</p>
    <button ng-click="sendPhoneNumber()" class="button homepage_button icon-right ">
      Valider
  </button>
  </ion-content>
</div>

这是新控制器

.controller('PhoneCtrl', function($scope, $http, $location, $localStorage,$ionicLoading, $ionicHistory, mySock, user,$cordovaNetwork, $ionicModal){ 

  $scope.cancel = function(){
    $scope.goBack(-1);
    $scope.modal2.hide();
  }

  $scope.sendPhoneNumber = function(){
    alert($scope.telephone)
    console.log($scope.telephone);
    $http.post(serverAddress+'/user/sendConfirmationSms', {telephone: $scope.telephone}).success(function(data){})
  }
 })

但我仍然不明白为什么它不能在原始控制器中工作..如果有人有想法？

Answer 1

这是您使用的全部代码吗？如果是，那么您在 $http.post() 调用中错过了 'config' 变量。

config 应该包含您在上面的代码中没有包含的 headers！

如果您已将其包含在您的代码中，请分享实际文件。

Answer 2

问题是 ion-content 特有的，因为此指令在 Ionic 源代码中的定义方式。它专门创建了自己的子作用域。

我可以通过将我的输入绑定到 $parent.telephone

改变这个

ng-model="telephone"

到此

ng-model="$parent.telephone"

所以

<ion-content  class="padding_header modalPhone">
    <h4> Entrez votre numéro de téléphone pour confirmer votre compte</h4>
    <label class="item item-input">
      <span class="input-label"><i class="ion-ios-telephone"></i> </span>
      <input type="tel" ng-model="$parent.telephone" placeholder="Entrez votre numero de mobile"/>
    </label>
    <p class="err_container" ng-if="err">{{err}}</p>
    <button ng-click="sendPhoneNumber()" class="button homepage_button icon-right ">
      Valider
  </button>
  </ion-content>

您可以在此处找到更多详细信息

problem-with-ion-content-and-scope-vars-inside-function

应您的要求，请往下看

我的 Index.html 带控制器

<!DOCTYPE html>
<html ng-app="routerApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//code.angularjs.org/1.4.8/angular.js"></script>
<script src="//rawgithub.com/g00fy-/angular-datepicker/1.0.3/dist/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script>

var routerApp = angular.module('routerApp', ['ui.router', 'ionic', 'ngCordova']);

routerApp.controller('RegisterCtrl', ['$scope', '$http', '$location', '$ionicLoading', '$ionicHistory','$cordovaNetwork', '$ionicModal', 
                                      function($scope, $http, $location, $ionicLoading, $ionicHistory,$cordovaNetwork, $ionicModal){
    $scope.telephone = "";

      $scope.sendPhoneNumber = function(){
          alert("--"+$scope.telephone);
        console.log($scope.telephone);
        /* $http.post(serverAddress+'/user/sendConfirmationSms', {telephone: $scope.telephone}).success(function(data){}) */
      }

    }]);

</script>
</head>
<body ng-controller="RegisterCtrl">
    <div class="modal">
        <ion-header-bar  class="actu_header">
      <h1 class="title">Nouvelles Infos</h1>
      <div class="button button-clear" style="width:50px" ng-click="cancel()"><span class="icon ion-chevron-down"></span></div>
    </ion-header-bar> 
     <ion-content  class="padding_header modalPhone">
    <h4> Entrez votre numéro de téléphone pour confirmer votre compte</h4> 
    <label class="item item-input">
      <span class="input-label"><i class="ion-ios-telephone"></i> </span>
      <input type="tel" ng-model="$parent.telephone" placeholder="Entrez votre numero de mobile"/>
    </label>
    <p class="err_container" ng-if="err">{{err}}</p>
    <button ng-click="sendPhoneNumber()" class="button homepage_button icon-right ">
      Valider
  </button>
  </ion-content> 
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.2.4/js/ionic.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-cordova/0.1.23-alpha/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
</body>
</html>

确保您将下载并在 html 文件中引用 cordova.js。

Answer 3

如果您确定自己的请求 json 这样，

{
telephone:$scope.telephone
}

尝试以下操作：

1) 在服务上方使用 console.log($scope.telephone) 检查其值是否正确。

2) 尝试像这样编辑您的 json `

$http.post(serverAddress+'/user/sendConfirmationSms', 
{
"telephone": $scope.telephone
})
.success(function(data){})

3) 检查您的服务 url 和端口号（这是重要的一般性错误）

angular $scope.variable 未在输入上使用 ng-model 指令进行更新

angular $scope.variable is not updating using a ng-model directive on input

angularjs

angular-ngmodel