3

Looks like this is happening in only Chrome. It works in firefox and safari. For some reason when I type into the input field to edit the value the cursor goes right to the end of the value. I've seen issues like this when ng-model and value where in the same input together but my input element only contains ng-model. So if I try to prepend "Hello" to a input that already has "World" in it, it will come out "HWorldello"

Plunker: http://plnkr.co/edit/r9orpQB36P9rH0HpBjaJ?p=preview

<input editable="{{ key }}"                  
     field="{{ list_editable_indexes[key] }}"
     ng-model="value"                        
 />
Austin
  • 4,296
  • 6
  • 40
  • 52
  • `editable`? `field`? By the way, you're plunker triggers some errors, I can't reproduce your problem. – Blackhole Aug 07 '14 at 21:29
  • `editable` is one of my directives shown in the script.js file. `field' I use to get information about the field to build it (input type, field name). The information is all dynamic based upon server response. You did make me realize that this is only happening in Chrome. Firefox and Safari this does not happen. – Austin Aug 07 '14 at 21:36
  • Not sure why a question that was explained and given a source to the problem gets down voted. Little quick to click the down arrow. – Austin Aug 07 '14 at 21:37
  • 1
    your plunker does not exhibit the behavior that you are describing in chrome. Also, your plunker has an error. – Claies Aug 07 '14 at 22:31
  • 1
    @Austin, looks like your editable directive is what breaks it. Maybe because you are recompiling the element? If you remove editable it no longer breaks. – Zack Argyle Aug 07 '14 at 22:40
  • @ZackArgyle you nailed it. That was the problem. Since both me and Zack were able to see this problem it probably has something to do with chrome version as to why some of us could see the problem and some couldn't. – Austin Aug 08 '14 at 01:05

2 Answers2

1

I resolved a similar issue just now. My input was contained within an *ngFor="let u of users" for listing my users. When I went to edit my user, I witnessed your described behavior. The input in question was an ngModel binding my user's UserName to u.UserName ie. [(ngModel)]="u.UserName"

My resolution came from understanding that my value={{u.UserName}} was also set. I simply had to remove the value={{u.UserName}} and the error disappeared while retaining the data binding.

I hope that makes sense or helps someone.

*Note. I understand its not AngularJS specifically but I figured it still applied.

jgritten
  • 915
  • 1
  • 11
  • 20
0

The cursor moves to the end because of the $compile(element). Taking that out fixes the cursor problem.

It doesn't look like you need to re-compile the elements, why are you doing it?

Similar to one of the issues here: link

This is also causing some of the errors. It's trying to compile the pre-repeated "

Community
  • 1
  • 1
marneborn
  • 699
  • 3
  • 9
  • Thanks. I'm still pretty new to angular and thought that I needed to recompile my element to add angulars validation css classes to it. – Austin Aug 08 '14 at 15:40