>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.
Can you not use isolated scope, pass in the panes collection to be used and assign that the 'panes' - simple example :
http://jsfiddle.net/joshdmiller/fhvd9/