AngularJS : Can a directive template contain a form element?

Question

Is it possible to use a form element inside an angular directive template? E.g. I might want to fully generate the form to save on repetitive coding - the HTML shows the data, the directive auto-generates the editing. I would find it useful for edit pages that repeat a lot:

<div data-editable="true">
  <span>{{item.name}}</span>        
</div>

And the directive:

.directive('editable',function(){
   return {
       restrict: 'AE',
       require: '^form',
       transclude:true,
       scope: {}, // to be set after...
       template:'<div><form name="someForm"><span>FORM</span></form></div>',
       link: function(scope,elm,attrs,controller) {
           //nothing here quite yet...
       }
   };
});

Yet when I run it, the output does not transclude, and the form element is stripped out:

<div data-editable="true" class="ng-isolate-scope"><div><span>FORM</span><ng-transclude></ng-transclude></div></div>

• The <span>{{item.name}}</span> is not transcluded in
• The <form> element is completely stripped out

What am I doing wrong?

Answer 1

There were 2 problems here:

1. There was a <form> inside a <form>, which was stripped out by either the browser or angular (I don't care which).
2. Angular pre-1.3.0 seems to support ng-transclude in the template only as an attribute. From 1.3.0 onwards it supports it as an element as well.