Ng model does not update when inserting commands in Safari browser
I have this search text box that is looking for text. If I add a text character by nature, it works fine, but when I insert data directly into the text box, my ng model is not updated. This issue is only related to the safari browser .
This is my html
<div class="div-input pull-left" ng-submit="submitFilterForm()" ng-class="{ 'filter-dropdown-adjustment' : showFilterState() }">
<input type="text" class="filter-input" ng-model="query" my-
enter="submitFilterForm()" auto-focus />
</div>
my-enter is my custom directive for pressing the enter key
My directive
'use strict';
define([
'angular',
'./module',
], function(angular, directives) {
/**
* Like ngShow but uses CSS visibility instead of display
*/
directives.directive('myEnter', [
function() {
return function(scope, element, attrs) {
element.bind("keydown keypress", function(event) {
if (event.which === 13) {
scope.$apply(function() {
scope.$eval(attrs.geEnter);
});
event.preventDefault();
}
});
};
}
])
});
This is my js file which contains the $ watch function on ng-model for the textbox
$scope.$watch("query", function(name) {
$scope.validationError = false;
console.log("value of query is", name);
filterStateService.updateSearchQuery(name);
});
+3
source to share
1 answer
Check it. I usedng-paste
<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/1.4.12/angular.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('mainController', function($scope) {
$scope.handlePaste =function(e){
setTimeout(function(){
$scope.query = e.target.value;
console.log(e.target.value,"val")
},10)
}
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="mainController">
<input type="text" ng-paste="handlePaste($event)" ng-model="query" />
{{query}}
</div>
</body>
</html>
0
source to share