В моем проекте я использую пользовательскую клавиатуру. Проблема в том, что когда пользовательская директива клавиатуры используется в двух полях ввода, то время, когда я набираю что-то в одном поле ввода, тогда его автоматический тип вводится в другом поле ввода.Например, есть A и B - это два моих поля ввода, и обе ng-модели различны, но они совпадают с именами моих пользовательских директив клавиатуры, такими как my-text, теперь, когда я набираю что-то в поле ввода A, оно автоматически вводитсяB. Вот мой код, который я сделал, пожалуйста, проверьте и исправьте мою проблему.
HTML-код
<div class="">
<input id="attrcls" type="text" ng-model="test" style="width: 40%;" class="form-control input-md" ng-focus="onFocus('attrcls')" my-text>
<input id="attrcls1" type="text" ng-model="test1" style="width: 40%;" class="form-control input-md" ng-focus="onFocus('attrcls')">
<div class="keyboard-container" ng-if="!focused">
<ul ng-repeat="row in layout track by $index" style="list-style-type: none;">
<li ng-if="element.action != 'esc'" ng-repeat="element in row.row track by $index" class="btn" ng-click="keyPressed(element.value, element.action)">
{{element.value}}
</li>
<li ng-if="element.action == 'esc'" ng-repeat="element in row.row track by $index" class="btn" ng-click="keyPressed(element.value, element.action)" ng-blur = "onBlur()">
{{element.value}}
</li>
</ul>
</div>
</div>
Код контроллера
$scope.keyPressed = function(value, action){
$scope.someInput = value;
$rootScope.$broadcast('keyPressed', $scope.someInput, action);
}
$scope.focused = true;
$scope.onFocus = (id)=>{
if($scope.focused){
$scope.focused = false;
}
}
$scope.onBlur = ()=>{
$scope.focused = true;
}
Код директивы
.directive('myText', ['$rootScope', function($rootScope) {
return {
link: function(scope, element, attrs) {
$rootScope.$on('keyPressed', function(e, val, action) {
var domElement = element[0];
if (document.selection) {
domElement.focus();
var sel = document.selection.createRange();
sel.text = val;
domElement.focus();
}
else if (domElement.selectionStart || domElement.selectionStart === 0) {
var startPos = domElement.selectionStart;
var endPos = domElement.selectionEnd;
var scrollTop = domElement.scrollTop;
if(action === 'del'){
if(startPos === endPos){
domElement.value = domElement.value.substring(0, startPos-1) + domElement.value.substring(endPos, domElement.value.length);
domElement.focus();
domElement.selectionStart = startPos - 1;
domElement.selectionEnd = startPos - 1;
}
else{
domElement.value = domElement.value.substring(0, startPos) + domElement.value.substring(endPos, domElement.value.length);
domElement.focus();
domElement.selectionStart = startPos;
domElement.selectionEnd = startPos;
}
domElement.scrollTop = scrollTop;
}else if(action === 'esc'){
$(".keyboard-container").css("display","none");
$("#attrcls").removeAttr('my-text');
}else{
domElement.value = domElement.value.substring(0, startPos) + val + domElement.value.substring(endPos, domElement.value.length);
domElement.focus();
domElement.selectionStart = startPos + val.length;
domElement.selectionEnd = startPos + val.length;
domElement.scrollTop = scrollTop;
}
} else {
domElement.value += val;
domElement.focus();
}
});
}
}
}])