【发布时间】：2016-01-22 13:09:46
【问题描述】：
我正在开发一个带有视图的 Angular 应用程序，用户可以在其中输入可以设置他的电话号码的输入。
<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){})
}
})
但我仍然不明白为什么它不能在原始控制器中工作..如果有人有想法？
【问题讨论】：
-
您确定是绑定不起作用而不是服务器调用？如果您在
$http.post上方添加console.log($scope.telephone)，电话号码是否会按照您的预期记录到控制台？ -
我相信您没有将 div 绑定到控制器。
-
@Rhumborl no 当我尝试
console.log($scope.telephone时，我唯一得到的是一个空字符串，无论如何 -
请完整发布您的 HTML 和 JS 文件。我在控制台上获得了适当的价值。再试一次我的回答。
-
@PratapA.K，刚刚做到了