カスタムディレクティブ - 親ディレクティブ内に子ディレクティブが表示されない

Question

注：ui-gridは私のカスタムグリッドの名前です。混乱をおかけして申し訳ありません。

私は子のカスタムディレクティブを持つカスタムディレクティブを持っており、htmlでこのように呼び出されます。

<ui-grid resource="/api/data.json"> 
      <ui-gridcolumns> 
      </ui-gridcolumns> 
     </ui-grid> 

子ディレクティブは親ディレクティブで囲まれている場合は、コンソール文は印刷されませんが、子ディレクティブは親ディレクティブの外にあるとき、それだけで罰金にconsole.log印刷します。親ディレクティブ内で子ディレクティブをどのように動作させるかについての洞察は高く評価されます。

親ディレクティブ：

module.exports = function() { 
    return { 
     restrict: 'E', 
     templateUrl: 'app/ui-grid/grid.template.html', 
     link: function (scope, element, attrs) { 
      console.log('linked Grid'); 
     }, 
     controller: ['$scope', function ($scope) { 
      $scope.onthescreen = 'test value'; 
     }] 
    }; 
}; 

子ディレクティブ：

module.exports = function() { 
    return { 
     restrict: 'E', 
     templateUrl: 'app/ui-grid/gridcolumns/grid.columns.template.html', 
     link: function (scope, element, attrs) { 
      console.log('linked Grid Columns'); 
     }, 
     controller: ['$scope', function ($scope) { 
      console.log('calling Grid Columns'); 
     }] 
    }; 
}; 

全体のコードベースは、参照のためにgitです。望ましい行動の使用トランスクルーを達成するために

https://github.com/eshrinivasan/angular-gulp-browserify-boilerplate

Answer 1

：

設定：

restrict: 'E', 
templateUrl: 'app/ui-grid/grid.template.html', 
link: function (scope, element, attrs) { 
    console.log('linked Grid'); 
}, 
controller: ['$scope', function ($scope) { 
    $scope.onthescreen = 'test value'; 
}], 
transclude: true 

とどこかにテンプレートで：

<div ng-transclude> 
    child directives will be placed here 
</div>