我有一个消息应用,我试图编辑一些消息。
当我试图在日期输入文本上编辑某些内容时出现错误,因为ng-check
被立即激活但我想延迟它直到我按照自己的意愿完成编辑日期。
我尝试使用ng-model-options="{debounce: 8000}"
,但它没有用。
我还特意使用一个函数,它会在特定的超时后调用我想在ng-change
中执行的任务,但它也不起作用。
我的editMessage
查看:
<div class="view">
<div class="container">
<header>
<h3>Edit Message</h3>
</header>
<form name="editForm" novalidate>
<div>
<div class="input-group">
<span class="input-group-addon">Message name:</span>
<input type="text" name="name" class="form-control" readonly="readonly" data-ng-model="message.name">
</div>
<div class="input-group">
<span class="input-group-addon">Message Screens:</span>
<input type="text" name="name" ng-repeat="screen in message.screensId" class="form-control" data-ng-model="message.screensId[$index]" required>
<button ng-click="toggleScreen()">Add Screen</button>
<span ng-hide="addScreen">
<input type="text" id="from" data-ng-model="message.screensId[$index+screensSize]" data-ng-change="ConvertToInt('sc',0,0)" />
</span>
</div>
<div class="input-group">
<span class="input-group-addon">Message Text:</span>
<input type="text" name="name" class="form-control" ng-repeat="txt in message.text" data-ng-model="message.text[$index]" required>
</div>
<div class="input-group">
<span class="input-group-addon">Message Images:</span>
<input type="text" name="name" class="form-control" ng-repeat="img in message.images" data-ng-model="message.images[$index]" required>
</div>
<div class="input-group">
<span class="input-group-addon">Message Template:</span>
<input type="text" name="name" class="form-control" data-ng-model="message.template" required>
</div>
<div class="input-group">
<span class="input-group-addon">Message Display Time:</span>
<input type="text" name="name" class="form-control" data-ng-model="message.msgTime" required>
</div>
<div class="input-group" ng-repeat="time in message.timeFrame">
<span class="input-group-addon">Message Time Frame:</span>
Start Date:<input type="text" name="name" class="form-control" data-ng-model="message.timeFrame[$index].startDate" date-parser="shortDate" data-ng-change="ConvertToDate($index,'s')" data-ng-model-options="{debounce: 7000}" required>
End Date:<input type="text" name="name" class="form-control" data-ng-model="message.timeFrame[$index].endDate" date-parser="shortDate" data-ng-change="ConvertToDate($index,'e')" data-ng-model-options="{debounce: 7000}" required>
Day:<input type="text" name="name" class="form-control" ng-repeat="day in time.days" data-ng-model="message.timeFrame[$index].days" data-ng-change="ConvertToInt('d',$parent.$index,$index)" required>
Start Houer:<input type="text" name="name" class="form-control" data-ng-model="message.timeFrame[$index].startTime" data-ng-change="ConvertToInt('st',0,$index)" required>
End Houer:<input type="text" name="name" class="form-control" data-ng-model="message.timeFrame[$index].endTime" data-ng-change="ConvertToInt('en',0,$index)" required>
</div>
</div>
<div class="row">
<div class="span12">
<button type="submit" class="btn btn-primary" data-ng-click="saveAdd()" ng-disabled="editForm.$invalid || !editForm.$dirty">{{buttonText}}</button>
</div>
<div class="span12">
<button type="submit" class="btn btn-primary" data-ng-click="navigate('/messages')">{{cancelButton}}</button>
</div>
</div>
</form>
</div>
</div>
我正在谈论的地方是:开始日期和EndDate中的消息时间范围。 这些是我希望在用户完成他想要的日期后激活我的ng-change的地方。
我的控制器:
myApp.controller('EditMessageController',['$scope', '$routeParams', 'socket','$location','$timeout', function($scope, $routeParams, socket,$location,$timeout) {
var msgEdit = MessageToEdit;
$scope.addScreen = true;
$scope.message, $scope.editMsg;
$scope.buttonText = 'Save Changes';
$scope.cancelButton = "Cancel";
socket.emit('getMessage', msgEdit);
socket.on('sendMessage', function(res) {
$scope.message = res[0];
initMsgDates($scope.message);
$scope.screensSize = $scope.message.screensId.length;
});
$scope.saveAdd = function(){
var bla = $scope.message.name;
}
$scope.navigate = function(url) {
$location.path(url);
};
$scope.toggleScreen = function() {
$scope.addScreen = $scope.addScreen === false ? true: false;
};
$scope.ConvertToInt = function(changed,parentIndex,index){
if (changed=='sc'){
$scope.message.screensId[$scope.screensSize] = parseInt($scope.message.screensId[$scope.screensSize]);
$scope.screensSize++;
}
else if(changed=='d'){
$scope.message.timeFrame[parentIndex].days[index] = parseInt($scope.message.timeFrame[parentIndex].days[index]);
}
else if (changed=='st'){
$scope.message.timeFrame[index].startTime = parseInt($scope.message.timeFrame[index].startTime);
}
else{
$scope.message.timeFrame[index].endTime = parseInt($scope.message.timeFrame[index].endTime);
}
};
var inputChangedPromise;
$scope.inputChanged = function(index,changed){
if(inputChangedPromise){
$timeout.cancel(inputChangedPromise);
}
inputChangedPromise = $timeout($scope.ConvertToDate(index,changed),8000);
};
$scope.ConvertToDate = function(index,changed){
if (changed=='s'){
$scope.message.timeFrame[index].startDate = new Date($scope.message.timeFrame[index].startDate);
}
else{
$scope.message.timeFrame[index].endDate = new Date($scope.message.timeFrame[index].endDate);
}
};
}]);
您可能会看到ConvertToDate
是我想在用户完成输入后激活的功能。
inputChanged
是我试图在ng-change
中激活以延迟ConvertToDate
的功能,但它也没有成功。