Plateforme Level Extreme
Abonnement
Profil corporatif
Produits & Services
Support
Légal
English
Select correct tab based on URL
Message
 
 
À
Tous
Information générale
Forum:
Javascript
Catégorie:
Autre
Titre:
Select correct tab based on URL
Divers
Thread ID:
01639217
Message ID:
01639217
Vues:
74
Hi everybody,

I am struggling to figure out if it is possible to show page with the correct tab matching the passed URL.

Here is the page markup
@{
    ViewBag.Title = Labels.preferences;
    Layout = "~/Views/Shared/_SearchDetailsLayout.cshtml";
}

<div class="col-md-12" ng-controller="prefsCrudController">
    <div class="ng-load-indicator" ng-show="isEditLoading"></div>
    <form name="form" class="form-horizontal ng-cloak" novalidate role="form">
        <div class="widget" data-resize:container>
            <div class="widget-head">
                <div ng-if="showGeneral" ng-cloak>
                    @Labels.admissionControl @Labels.preferences: @Labels.general
                </div>
                <div ng-if="showRenewal" ng-cloak>
                    @Labels.admissionControl @Labels.preferences: @Labels.renewal @Labels.rules
                </div>
                <div ng-if="showPassPrefixes" ng-cloak>
                    @Labels.admissionControl @Labels.preferences: @Labels.passPrefixes
                </div>
                <div ng-if="showPrecedence" ng-cloak>
                    @Labels.admissionControl @Labels.preferences: @Labels.validationPrecedences
                </div>
                <div ng-if="showHotlists" ng-cloak>
                    @Labels.admissionControl @Labels.preferences: @Labels.hotlists
                </div>
                <div ng-if="ShowAssignno" ng-cloak>
                    @Labels.admissionControl @Labels.preferences: @Labels.assignNoThreshold
                </div>
            </div>
            <div class="widget-content">
                <div class="padd scrollable widget-resize">
                    @Html.Partial("_EditFormAlerts")
                    <div class="col-lg-2 col-md-2 panel-container">
                        <sm-nav-tabs>
                            <sm-nav-tab name="general" title="@Labels.general" on-activating="setShowings('general')"></sm-nav-tab>
                            <sm-nav-tab name="renewal" title="@Labels.renewal" on-activating="setShowings('renewal')"></sm-nav-tab>
                            <sm-nav-tab name="passPrefixes" title="@Labels.passPrefixes" on-activating="setShowings('passPrefixes')"></sm-nav-tab>
                            <sm-nav-tab name="precedence" title="@Labels.validationPrecedences" on-activating="setShowings('precedence')"></sm-nav-tab>
                            <sm-nav-tab name="hotlists" title="@Labels.manageHotlist" on-activating="setShowings('hotlists')"></sm-nav-tab>
                            <sm-nav-tab name="assignno" title="@Labels.manageAssignNoThreshold" on-activating="setShowings('assignno')" last-tab="true"></sm-nav-tab>
                        </sm-nav-tabs>
                    </div>
                    <div class="col-lg-10 col-md-10 panel-container">
                        <div data-ui-view data-autoscroll="false"></div>
                    </div>
                </div>
            </div>
            <div class="widget-foot" ng-cloak>
                <div>
                    <button class="btn btn-primary" ng-click="save(currentPrefs)"
                            ng-disabled="form.$invalid || disableAction" ng-if="showGeneral" ng-cloak>
                        @Labels.save
                    </button>
                    <button class="btn btn-primary" ng-click="saveSettings(prefsSettings.currentSettings)"
                            ng-disabled="form.$invalid || !form.editPrefsRenewalForm.$dirty" ng-if="showRenewal" ng-cloak>
                        @Labels.save
                    </button>
                    <button class="btn btn-primary" ng-click="saveTemplatePrecedences(precedenceSettings.precedenceTemplatesList)"
                            ng-disabled="form.$invalid || !form.editPrefsPrecedenceForm.$dirty" ng-if="showPrecedence" ng-cloak>
                        @Labels.save
                    </button>
                    <button class="btn btn-primary" ng-click="saveHotlist(hotlistSettings.currentHotlist)"
                            ng-disabled="form.$invalid || !form.editHotlistGeneralForm.$dirty" ng-if="showHotlists" ng-cloak>
                        @Labels.save
                    </button>
                    <button class="btn btn-primary" ng-click="saveAssignno(assignnoSettings.currentAssignno)"
                            ng-disabled="form.$invalid || !form.editAssignnoGeneralForm.$dirty" ng-if="ShowAssignno" ng-cloak>
                        @Labels.save
                    </button>
                    <data-cancel:button title="@Labels.unsavedChanges"
                                        ng-if="!showPassPrefixes"
                                        message="@Messages.unsavedChanges"
                                        cancel="cancel()"
                                        disable-action="disableAction"
                                        dirty="form.$dirty"></data-cancel:button>
                </div>
            </div>
        </div>
    </form>
</div>
where smNavTabs directive (and the child directives) are defined as following:
.directive('smNavTabs', ['$rootScope', '$location', '$state', '$stateParams', '$log', navTabViews])
    .directive('smNavTab', ['$rootScope', '$location', '$state', '$stateParams', navTabView])
    .directive('smNavTabValidate', ['$rootScope', navTabViewValid]);     

     function navTabViews($rootScope, $location, $state, $stateParams, $log) {
        var log = $log.getInstance("navTabViews");
        return {
            restrict: 'E',
            transclude: true,
           // priority: 1001,
           // replace: true,
            scope: {},
            controller: function ($scope) {
                log.info('Controller is called');
                $rootScope.$state = $state;
                $rootScope.$stateParams = $stateParams;

                $rootScope.stateChangeAborted = false;
                $rootScope.currentNavTab = {};                 

                var panes = $scope.panes = [];                

                $scope.select = function (uiView) {
                    log.info('Select method is called with the view=' + uiView.name);
                    // call hook before changing state
                    //uiView.onActivating(uiView.name);
                    uiView.onActivating();

                    // use $rootScope to make call to change the state
                    $rootScope.$state.go(uiView.name, uiView.viewSettings.params, uiView.viewSettings.options);

                    //// set first call from 'addPane' function
                    //// to default tab
                    //if (uiView.isVisible != false) {
                    //    uiView.isActive = true;
                    //}
                };


                $scope.$watch($state.current, function (newValue, oldValue) {
                    if (newValue !== oldValue) {
                        log.info('$state.current value change...');
                        $rootScope.setNavTabs(newValue);
                    }
                });

                // called from $stateNotFound, $stateChangeError, $stateChangeAborted
                // and $stateChangeSuccess event listeners
                $rootScope.setNavTabs = function (viewName) {
                    var i = 0;
                    log.info('setNavTabs for the view=' + viewName ); 
                    for (i = 0; i < panes.length; i++) {
                        var pane = panes[i];

                        // set to 'false' all but matching name
                        pane.isActive = false;
                        if ((pane.name == viewName)) {
                            // recall hook if stateChangeAborted = true
                            if ($rootScope.stateChangeAborted == true) {
                                pane.onActivating(viewName);
                            }
                            //window.console && console.log('Activating ' + viewName);
                            pane.isActive = true;
                            $rootScope.currentNavTab = pane;
                        }
                    }
                }

                //onStateChangeStart
                $rootScope.$on('$stateChangeStart',
                function (event, toState, toParams, fromState, fromParams) {
                    // reset stateChangeAborted flag
                    $rootScope.stateChangeAborted = false;

                    // Check if current smNavTab is Valid
                    //if ($rootScope.currentNavTab && $rootScope.currentNavTab.isValid == false) {
                    //    event.preventDefault();

                    //    $rootScope.stateChangeAborted = true;
                    //    $rootScope.setNavTabs(fromState.name);
                    //};
                })

                //onStateNotFound
                $rootScope.$on('$stateNotFound',
                function (event, unfoundState, fromState, fromParams) {
                    $rootScope.stateChangeAborted = true;
                    $rootScope.setNavTabs(fromState.name);
                })

                //onStateChangeError'
                $rootScope.$on('$stateChangeError',
                function (event, toState, toParams, fromState, fromParams) {
                    $rootScope.stateChangeAborted = true;
                    $rootScope.setNavTabs(fromState.name);
                })

                //onStateChangeAborted
                $rootScope.$on('$stateChangeAborted',
                function (event, toState, toParams, fromState, fromParams) {

                    $rootScope.stateChangeAborted = true;
                    $rootScope.setNavTabs(fromState.name);
                })

                //onStateChangeSuccess
                $rootScope.$on('$stateChangeSuccess',
                function (event, toState, toParams, fromState, fromParams) {
                    $rootScope.stateChangeAborted = false;
                    if (toState.name!=fromState.name)
                        $rootScope.setNavTabs(toState.name);
                })

                this.addPane = function (pane) {
                    
                    //if (panes.length === 0) {
                    //    $scope.select(pane);
                    //}
                    panes.push(pane);
                    //window.console && console.log('Adding pane ' + pane.name + ' out of ' + panes.length + ' panes');
                    if (pane.lastTab)
                    {
                        $log.debug("addPane method is selecting the first tab now...")
                        // panes = tabs;
                        $scope.select(panes[0]);
                        if (panes[0].isVisible)
                        {
                            panes[0].isActive = true;
                        }
                    }
                };
            },
            templateUrl: 'app/templates/smNavTabs'
        };
    };

     function navTabView($rootScope, $state, $stateParams) {

       
        return {
            require: '^smNavTabs',
            restrict: 'E',
            transclude: false,
            //priority: 1002,
            //replace: true,
            scope: {
                name: '@',
                title: '@',
                viewSettings: '@?',
                onActivating: '&?',
                // http://stackoverflow.com/questions/18667388/change-attribute-from-within-directive
                isVisible: '=?',
                lastTab: '=?'
            },
            link: function (scope, element, attrs, tabsCtrl) {
                
                //default settings and functions
                var defaultViewSettings = function () {
                    var params, options;
                    params = {};
                    options = {
                        location: true,
                        inherit: true,
                        relative: $state.$current,
                        notify: true,
                        reload: false
                    };

                    return {
                        params: params,
                        options: options
                    };
                };

                var defaultOnActivating = function () {

                };

                scope.isValid = true;
                scope.isVisible = (scope.isVisible === undefined) ? true : scope.isVisible;
                scope.viewSettings = scope.viewSettings || defaultViewSettings();
                scope.onActivating = scope.onActivating || defaultOnActivating();
                scope.lastTab = scope.lastTab || false;
                tabsCtrl.addPane(scope);
            },
        };
    };

    function navTabViewValid($rootScope) {
        return {
            require: ['^form'],
            restrict: 'A',
            link: function (scope, element, attrs, ctrl) {

                var form = ctrl[0];

                if (scope.$parent) {
                    if (scope.$parent.invalidTabs == undefined)
                        scope.$parent.invalidTabs = 0;
                }
                scope.$watch(
                    'form.$invalid',
                    function (newValue, oldValue) {

                        if (newValue != oldValue) {
                            if (newValue === true && $rootScope.currentNavTab) {
                                $rootScope.currentNavTab.isValid = false;
                                scope.$parent.invalidTabs = 1;
                                //window.console && console.log($rootScope.currentNavTab.name + ' tab is invalid; scope.invalidTabs =' + scope.$parent.invalidTabs);
                            };
                            if (newValue === false) {
                                $rootScope.currentNavTab.isValid = true;
                                scope.$parent.invalidTabs = 0;
                                //window.console && console.log($rootScope.currentNavTab.name + ' tab is valid; scope.invalidTabs =' + scope.$parent.invalidTabs);
                            };
                        };
                    }
                )
            },
        };
    };
So, if I am passing the following URL:

http://localhost:5525/AdmissionControl/Prefs#/assignno

I am supposed to show the last tab. Instead I always automatically switch to the first (general) tab (and the URL changes to it as well). What can be done to stay on the correct tab?

Thanks a lot in advance.
If it's not broken, fix it until it is.


My Blog
Répondre
Fil
Voir

Click here to load this message in the networking platform