$scope gets null after calling template in directive - angularjs

Question

i have a nested directive like this
app.directive('grid', ['$log', '$http', function ($log , $http) {
return {
restrict: 'E',
scope: {},
//template: '<span></span>', //i uncomment this line
controller: function ($scope, $element, $attrs){
var swColumns = [];
this.setColumns = function (columns) {
swColumns = columns;
$log.log('grid controller');
$log.log(columns);
$scope.swColDefs = columns;
$log.log($scope.swColDefs);
};
this.getColumns = function () {
return swColumns;
};
},
link: function (scope, element, attrs, gridController) {
$log.log('grid link');
$log.log(gridController.getColumns());
$log.log(scope.swColDefs);
}
};
}]);
app.directive('gridColumns', ['$log', function ($log) {
return {
restrict: 'E',
require: ['^grid', 'gridColumns'],
controller: function () {
var columns = [];
this.addColumns = function (column) {
columns.push(column);
};
this.getColumns = function () {
return columns;
};
},
link: function (scope, element, attrs, controllers) {
var gridController = controllers[0];
var gridColumnsController = controllers[1];
gridController.setColumns(gridColumnsController.getColumns());
}
};
}]);
every thing is ok until i uncomment the template in grid directive
after that the swColDefs in grid link function become an empty array
what is wrong with my code ?
<grid>
<grid-columns>
</grid-columns>
...
</grid>
and i am using it like this

Answer 1

Although the question doesn't specify, I'm assuming you're using your directive like so:
<grid>
<grid-columns>
</grid-columns>
...
</grid>
But since you're specifying a template of <grid>, Angular removes the contents and sets the template instead. And so, gridColumns directive never compiles and the link function never runs.
This is where transclusion is needed on grid. Transclusion takes the content out of DOM, compiles it (at compile-phase) and then allows you to link it against whatever scope you need and place it in the contents.
It's not clear from your question what scope gridColumns directive needs be linked against, and whether it has any visual components.
For a simple transclusion case, this can be done with <ng-transclude> in the template of grid:
transclude: true,
template: "<span>whatever</span><div ng-transclude></div>" // template of grid
Or, for more precise control over scope and placement you can use the transclude function (passed as a fifth parameter to the link function):
transclude: true,
template: "<span>whatever</span>",
link: function(scope, element, attrs, gridController, transclude){
transclude(function(transcludedContent){
// place the content where needed, if at all
});
}

Answer 2

I have solved the problem by doing this in grid template
first i add a div with ng-transclude to the template
secod transclude : true in grid directive
app.directive('grid', ['$log', '$http', function ($log , $http) {
return {
restrict: 'E',
scope: {},
transclude:true,//my change
template: '<span>
<div ng-transclude>//my change
</div>
</span>',
controller: function ($scope, $element, $attrs){
var swColumns = [];
this.setColumns = function (columns) {
swColumns = columns;
$log.log('grid controller');
$log.log(columns);
$scope.swColDefs = columns;
$log.log($scope.swColDefs);
};
this.getColumns = function () {
return swColumns;
};
},
link: function (scope, element, attrs, gridController) {
$log.log('grid link');
$log.log(gridController.getColumns());
$log.log(scope.swColDefs);
}
};
}]);