AngularJS : Directive Isolated Scoping - angularjs

Question

I'm developing a AngularJS Directive that is a table. The parent most control ng-table needs to have a isolated scope for its options and model.
However, the children should 'inherit' that scope so that you don't have to pass tons of options to a very interconnected group of components.
For example:
<div ng-table="tableOptions" ng-model="results">
<div ng-table-header>
<div ng-table-header-column="column"
ng-repeat="column in tableOptions.columns">
{{column.name}}
</div>
</div>
<div ng-table-body>
<div ng-table-row="row"
ng-repeat="row in $results">
<div ng-table-cell="column"
ng-repeat="column in tableOptions.columns">
{{row[column.id]}}
</div>
</div>
</div>
<div ng-table-footer></div>
</div>
In the above example, ng-table-header, ng-header-column, etc all need to access properties from the parent control ng-table. Furthermore, all the directives replace and transclude.
I know I could broadcast events to the children/parent directives but is there a better way to restrict scope at the parent level and auto pass it to the children?

Answer 1

Oh dude, you have forced me to look how forms and inputs directives are implemented in angular.
So, angularjs has similar thing to what you want to implement - ng-form directive with ng-input.
When you use form or ng-form directive, it creates controller(directives can do it) and transclude html-code will inherit it. ng-input(input) asks for it in require option.
require: ['ngModel', '^?form', '^?ngModelOptions'],
So you get this controller in link function. So... you can call functions, do things, you know.
You can do it like this(just an idea, this is how it works):
.directive('coolTable', function() {
return {
...
controller: function($scope) {
$scope.columns = []; /* Here you will have all table columns, so you can send it's data to service and do any work */
$scope.registerColumn = function(column) {
$scope.columns.push(column);
};
},
...
};
})
.directive('column', function() {
return {
...
require: '^?coolTable',
...
link: function(scope, element, attrs, coolTable) {
coolTable.registerColumn(this);
},
};
})
<coolTable>
<column></column>
<column></column>
<column></column>
</coolTable>

Answer 2

I was able to find a work around looking at angular-ui code that created their own transclude directive to apply scope.
so my master table directive starts off like:
module.directive('ngTable', function ($rootScope, $timeout, $window, $compile) {
return {
restrict: 'AE',
transclude: true, // NOTE THIS
replace: true, // NOTE THIS
templateUrl: 'common/components/table/views/table.tpl.html',
scope: {
ngModel: "=",
tableOptions: "=ngTable"
},
controller: 'ngTableCtrl',
link: function ($scope, $element, $attributes, controller, ngModel) {
....
}
}
});
then I create my own transclude directive like:
module.directive('tableTransclude', function () {
return {
link: function ($scope, $element, $attrs, controller, $transclude) {
$transclude($scope, function (clone) {
$element.empty();
$element.append(clone);
});
}
};
})
and the usage in the template of table looks like:
<div table-transclude />
And presto!!! A little hacky but gets the job done. I understand why Angular did this but in some cases you need this type of scoping.