Angular directive - asking for transclusion?

Question

I get an error below and I don't understand why. Any ideas?

html,

<button ng-click="loadForm()">Load Directive Form</button>
<div data-my-form></div>

angular,

   app.directive('myForm', function() {
        return {
          replace:true,
          controller:function($scope){
            $scope.isLoaded = false;
            $scope.loadForm = function(){
              $scope.isLoaded = true;
            }
          },
          template: '<div ng-if="isLoaded" ng-include="\'form.php\'" ></div>',
          link:function(scope, element) {

          }
        }
    });

error,

Error: [$compile:multidir] Multiple directives [ngInclude, ngInclude] asking for transclusion on: <div data-my-form="" ng-if="isLoaded" ng-include="'form.php'">

a fix,

'<div><div ng-if="isLoaded" ng-include="\'form.php\'" ></div></div>'

but why do I have to wrap it in a div? is it a angular bug?

Answer 1

The error is clear. There are two directives on the same element that is trying to use transclusion:

1. ng-if 
2. ng-include

An element can only apply one transclusion.

To fix, try this instead:

<div data-my-form="" ng-if="isLoaded">
   <div ng-include="'form.php'"> </div>
</div>