Two way data binding with custom directive

1,591 views
Skip to first unread message

bdi...@gmail.com

unread,
Dec 7, 2012, 5:08:21 PM12/7/12
to ang...@googlegroups.com
I'm trying to get two-way data binding working with my own directive. I'm using an isolate scope in the directive, and passing a model object using ng-model. However, I've noticed that the two way data binding only works if the model name is the same in the controller and the directive. If they are different, I'm getting some funny behavior (the binding only works every other action).

I have a fiddle that demonstrates the issue.

Also, I'm currently using a window.setTimeout in my directive because that is the only way I could manage to retrieve the DOM elements - I'm not sure why, could use some clarification on this as well.

Thanks for any help.

bdi...@gmail.com

unread,
Dec 7, 2012, 5:09:24 PM12/7/12
to ang...@googlegroups.com, bdi...@gmail.com
Forgot the fiddle. Here it is: http://jsfiddle.net/bdicasa/XSFpu/79/

Daniel Szak Ferenc

unread,
Dec 7, 2012, 6:37:23 PM12/7/12
to ang...@googlegroups.com, bdi...@gmail.com
i ported it to plunker, cleaned up code, binding seems to work - but the update cycle does not (as Yours..every second gets it right).

i'm puzzled myself. Just when i thought i started to get my head around this $apply and $digest stuff...:S

ganaraj p r

unread,
Dec 7, 2012, 7:02:16 PM12/7/12
to ang...@googlegroups.com, bdi...@gmail.com
I did figure out a solution for your issue. It is an interesting one.


You were probably not using ngModel the right way.  You can get more documentation on ngModel in here http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController

I am not really happy with my solution either. I have jumped around the issue of creating an isolated or child scope so that you can still access that ngModel from outside. as soon as I go into child scope ( by doing scope :true ) or worse isolated scope your external ngModel variable does not update. 

I would really be glad to know a good solution for this ( or one of the committers attribute that my solution is good enough!!! ). 


Hope this helps :)

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
 
 



--
Regards,
Ganaraj P R

bdi...@gmail.com

unread,
Dec 8, 2012, 11:39:07 AM12/8/12
to ang...@googlegroups.com, bdi...@gmail.com
Thanks for the help guys, much appreciated. I like the solution you came up ganaraj, I'll have to look more into how it is working :). The only thing that concerns me is it isn't an isolated scope, which I thought we were supposed to use for re-usable components?

ganaraj p r

unread,
Dec 8, 2012, 1:42:33 PM12/8/12
to ang...@googlegroups.com, bdi...@gmail.com
Pretty much all of the built in directives are all non isolate scope. To be frank I was attempting to not create an isolate scope :)

On Sat, Dec 8, 2012 at 4:39 PM, <bdi...@gmail.com> wrote:
Thanks for the help guys, much appreciated. I like the solution you came up ganaraj, I'll have to look more into how it is working :). The only thing that concerns me is it isn't an isolated scope, which I thought we were supposed to use for re-usable components?

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
 
 

bdi...@gmail.com

unread,
Dec 8, 2012, 3:48:14 PM12/8/12
to ang...@googlegroups.com, bdi...@gmail.com
Ok, that is fine with me then. Thanks again for the help. I think I now have a pretty solid understanding of how to create directives. :)
Reply all
Reply to author
Forward
0 new messages