Level Extreme platform
Subscription
Corporate profile
Products & Services
Support
Legal
Français
Scope problem
Message
From
18/11/2015 05:13:49
 
General information
Forum:
Javascript
Category:
Other
Title:
Miscellaneous
Thread ID:
01627559
Message ID:
01627577
Views:
39
This message has been marked as a message which has helped to the initial question of the thread.
>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/
Previous
Next
Reply
Map
View

Click here to load this message in the networking platform