Question

我正在开发一个角度应用程序，其中包含用户可以设置其电话号码的输入视图。

 <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>

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

    .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”，电话的值也不会实际发送到服务器。

--- ---更新

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

由于在Ionic源代码中定义了该指令的方式，因此该问题与ion-content有关。它专门创建了自己的子范围。

我可以通过绑定输入来解决问题 $ 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 2

这是您使用的总代码吗？如果是，那么你错过了＆＃39; config＆＃39; $ http.post（）调用中的变量。

配置应包含您尚未包含在上述代码中的标题！

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

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）检查你的服务网址和端口号（这是一个重要的一般错误）

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

3 个答案: