In my form controller, I have 2 object models: model1 - {name:"foo"} and model2 - {name:"model2"}. To implement this, I created 2 directives with isolated scopes. One directive binds only to elements and uses model1, while the other binds only to attributes and uses model2.
The structure is as follows:
<div myattibute="model2">
<mytag my-model="model"></mytag>
</div>
The attribute-only directive does not have a template, whereas the tag directive has a template.
The issue I am facing is that the model in mytag directive is returning undefined.
1. Can someone identify the problem and provide an explanation on Plnkr?
http://plnkr.co/edit/Q23XqY?p=preview
Partial Solution: I managed to get it working by adding an empty div template with just ng-transclude for the myattribute directive. However, I would like this attribute directive to be used on any element, such as div or span. Here is the solution: http://plnkr.co/edit/z0M5ys?p=preview
2. How does ng-transclude impact scope inheritance?
3. Is it possible to create this attribute with pure business logic without any markup?