$scope gets null after calling template in directive

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

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

Answer 2

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