ディレクティブコントローラでコンパイルを使用するときにngTranscludeディレクティブをテンプレート内で不正に使用する

Question

私のディレクティブコントローラでコンパイルを使用して最初のディレクティブ要素を取得し、コンパイルしてから別の目的に使用します私の指示のリンク方法は、とにかくこのエラーを取り除くにはありますか？

私はこのJSFIDDLEで問題を再現しました：

var app = angular.module('app', []); 
     app.directive('panel', function ($compile) { 
      return { 
       restrict: "E", 
       replace: true, 
       transclude: true, 
       template: "<div><h1>handrouss</h1><div ng-transclude ></div></div>", 
       controller: function($scope, $element) { 
        var el = $compile($element.find('div')[0])($scope); // <--- this causing the issue 
        $scope.handrouss = el.html(); 
       }, 
       link: function (scope, elem, attrs) { 
       } 
      } 
     }); 
     app.directive('panel1', function ($compile) { 
      return { 
       restrict: "E", 
       replace:true, 
       transclude: true, 
       template:"<div ng-transclude></div>", 
       link: function (scope, elem, attrs) { 
        elem.children().wrap("<div>"); 
       } 
      } 
     }); 

HTML：

<div data-ng-app="app"> 
    <panel1> 
     <panel> 
      <input type="text" ng-model="firstName" />{{firstName}} 
     </panel> 
     <input type="text" ng-model="lastname" /> 
    </panel 

Answer 1

がコントローラにコンパイルする前に要素からng-transclude属性を削除します。トランスクルーがすでにコントローラにコンパイルするときng-transcludeディレクティブはもはや必要とされているディレクティブのコンパイル段階で行われていたよう

app.directive('panel', function ($compile) { 
     return { 
      restrict: "E", 
      replace: true, 
      transclude: true, 
      template: "<div><h1>handrouss</h1><div ng-transclude ></div></div>", 
      controller: function($scope, $element) { 
       var div = $element.find('div'); 
       //REMOVE ng-transclude attribute 
       div.removeAttr('ng-transclude'); 
       var el = $compile(div[0])($scope); 
       $scope.handrouss = el.html(); 
      }, 
      link: function (scope, elem, attrs) { 
      } 
     } 
    }); 

。

DEMO on JSFiddle