пользовательские директивы - дочерние директивы не отображаются, если они включены в родительскую директиву

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'); 
     }] 
    }; 
}; 

Весь базовый код в мерзавцем для справки.

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>