0

Plunker: Direct Edit example.

In the above plunker, I have a directive (direct-edit) which uses 

transclude: 'element',

to surround the element with other markup. The directive 

requires: 'ngModel',

to connect the additional markup to the model. However, because the initial element is wrapped up with ng-transclude, it becomes disconnected from the model. Does anyone know how to fix this?

EDIT (from comments below):

To clarify: I want to take any arbitrary directive: 

<custom attr1="" attr2="" style="" ng-model="random" />

and add the direct-edit directive so that the arbitrary directive is paired with a field that edits the value directly. For the purposes of simplicity, I'm only showing a text input in the example code.

John Slegers
  • 45,213
  • 22
  • 199
  • 169
AaronF
  • 2,841
  • 3
  • 22
  • 32
  • Sorry. Wrong plunker for a brief moment. – AaronF Jul 14 '14 at 21:29
  • for starters...always have a `dot` in `ng-model`. Binding of primitives gets lost in nested scopes – charlietfl Jul 14 '14 at 21:38
  • Done. However, this doesn't solve the transclusion issue. – AaronF Jul 14 '14 at 21:43
  • I really don't follow what you are trying to do. what is `$parent.ngModel` for? Just put a dot in all `ng-model` , define main model object at highest level of scope and should see it pass through – charlietfl Jul 14 '14 at 21:49
  • $parent.ngModel accesses the ngModel reference in the direct-edit directive's isolate scope. $parent is necessary because ng-if="" creates a child scope. As for putting a "." in each ng-model... I'm afraid I don't follow. I made the message variable an object, accessing it with "message.value". Isolate scopes cut themselves off from direct access to parent scope values. You have to use $parent or define accessible values in the scope object. – AaronF Jul 14 '14 at 21:54
  • An example of what you're talking about would be very helpful. – AaronF Jul 14 '14 at 21:58
  • http://plnkr.co/edit/KZDMFkUW5czNGhZaHDPG?p=preview – charlietfl Jul 14 '14 at 21:58
  • I looked at the plunker, and it's not working quite like you might think it is. Here's what you wrote, but with all values tied to "model.message":http://plnkr.co/edit/XHTL0L6TIiKipsj3V3Sa?p=preview The problem is first, this is a general template. It shouldn't be tied to a specific value, but rather to any arbitrary model value that comes out of my parser. Second, even with your fix, only the direct-fill textbox affects the model. The textarea (which you see by unchecking the checkbox), has no effect on the model at all. – AaronF Jul 14 '14 at 22:05
  • I would remove your directive from the textarea itself or set priority on it. You have 2 directives on one element. Would be rare to need a textarea without a wrapping element and putting directive on that wrapper will save you lots of grief also – charlietfl Jul 14 '14 at 22:09
  • Are you referring to ng-model and direct-edit? I can't get rid of the ng-model because direct-edit requires ng-model in order to eventually use $formatters, etc... – AaronF Jul 14 '14 at 22:14
  • Let me sum up my intentions for clarification: I want to take any arbitrary directive: and add the direct-edit directive so that the arbitrary directive is paired with a field that edits the value directly. For the purposes of simplicity, I'm only showing a text input here. – AaronF Jul 14 '14 at 22:24

0 Answers0