Updating ng-model within a directive that uses a template
angularjs, javascript
Solution
Depending on how complicated your passthrough is, you can just use the = scope to do a bidirectional bind between a local name and ngModel, like in this fiddle:
http://jsfiddle.net/mThrT/22/
I had a hell of a time setting up the fiddle for some reason (first time trying with angular) but here's the money shot:
template: '<div class="datepicker-wrapper input-append">'
+ '<input type="text" class="datepicker" ng-model="bar" />'
+ '<span class="add-on"><i class="icon-calendar"></i></span>'
+ '</div>',
scope: {
bar: '=ngModel'
},
Problem
I have a directive that is instantiated like this: ``` <datepicker ng-model="foo"></datepicker> ``` Inside the directive, the datepicker tag is replaced by this template: ``` template: '<div class="datepicker-wrapper input-append">' + '<input type="text" class="datepicker" />' + '<span class="add-on"><i class="icon-calendar"></i></span>' + '</div>' ``` The value that I want ng-model bound to is the value of the input field. What is the best way to go about this so I maintain the two-way data binding of ng-model?