google chrome - AngularJS custom validation directive: cursor jumps to end of string -

i wrote custom angularjs directive dynamically adds ng-pattern , other stuff.

it works, in chrome , internet explorer, if user tries enter chars in middle of existing string, cursor jumps end of string. in firefox works fine.

(tested chrome 44, firefox 40, ie 11)

html:

<input type="text" name="input1" ng-model="value1" validation-directive> 

js:

myapp.directive("validationdirective", function ($compile) {     return {         restrict: 'a',         link: function (scope, element) {             element.removeattr('validation-directive'); // necessary avoid infinite compile loop             element.attr("ng-pattern", new regexp("^[a-z]{0,10}$"));             //do more stuff...             $compile(element)(scope);         }     }; }); 

http://jsfiddle.net/y8416aax/

why happened? , can fix that?

thanks!

basically need remove directive attribute , add ng-pattern attribute compile function itself. because inside compile function have raw dom doesn't have scope populated with.

to make our directive execute first need add highest priority it, directive gets compile first terminal: true disallow execute other directive on element ng-model.

in link function produced compile function compile element have our actual manipulated dom has ng-pattern working.

directivee

myapp.directive("validationdirective", function ($compile) {     return {         restrict: 'a',         priority: 1001,         terminal: true,         compile: function (ele) {             // necessary avoid infinite compile loop             ele.removeattr('validation-directive');              ele.attr("ng-pattern", new regexp("^[a-z]{0,10}$"));             return function (scope, element) {                 $compile(element)(scope);             }         }     }; }); 

working fiddle