@{ 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: