Hi everybody,

My colleague designed the following directive:

 function navTabViews($rootScope, $location, $state, $stateParams) {
        return {
            restrict: 'E',
            transclude: true,
            replace: true,
            scope: {},
            controller: function ($scope) {
                $rootScope.$state = $state;
                $rootScope.$stateParams = $stateParams;

                $rootScope.stateChangeAborted = false;
                $rootScope.currentNavTab = {};             
                
                var panes = $scope.panes = [];

                //mode code here

with the template:

<div class="tabbable">
    <ul class="nav nav-pills nav-stacked">
        <li ng-repeat="pane in panes" ng-class="{active:pane.isActive,'invalid-tab':!pane.isValid}" 
        ng-show="pane.isVisible">
            <a href="" ng-click="select(pane)" >{{pane.title}}</a>
        </li>
    </ul>
    <div class="tab-content" ng-transclude ></div>
</div>

It works quite nicely in a relatively simple form.

However, we can not have that directive in parent form and a child form called from the parent as the directive uses scope.panes variable and when this directive is used in the child form, it overwrites the panes variable.

I am looking for some way out of this problem. I did a quick test of trying to use isolated scope (e.g. changed transclude to false and removed ng-transclude from the template, but then the tabs didn't show up at all).

The other solution I can think of is to have a property (on the pane) that will tell as that this is a child form and in this case refer to something else (not the panes, but, say, subPanes). However, I don't see a way to implement it.

Finally, another solution would be to use 2 other directives with a very similar code as the above one but named differently and referring to different name.

What do you think and how can I overcome that problem?

Thanks in advance.