Home / Questions / 49206
Accepted
Diego
Asked: 2020-02-14 06:39:32 +0800 CST 2020-02-14 06:39:32 +0800 CST

Disable a section with $stateProvider

  • 772

I am making a website in which there is a side menu, in which options can be activated or hidden.

I would like to know if there is a way that if I have the following in the menu:

> -seccion1
> -seccion2
> -seccion4

Which point to 192.168.1.1/app/seccion1...

I'd like to be able to limit the functionality in the $stateProvider so that if you access section3 (which could be accessed from url) but not from the menu, since it's hidden, it won't let you access it.

I currently have the following code:

View

<li class="sidebar-list" ng-show="seccion1">
    <a ng-class="{ activo: isActive('/seccion1') }" href="#/seccion1">Sección 1</a>
</li>

routes

.state('seccion1', {
     url: '/seccion1',
     parent: 'menu',
     templateUrl: 'templates/seccion1.html',
     controller: 'Seccion1Ctrl',
     ncyBreadcrumb: {
         label: 'Sección 1'
     }
 })
javascript

1 Answers

  1. Best Answer

    States, the state, may or may not have a url, it is optional

    ui-router allows you to have a state with "/", which does not change the url, and which is not triggered by url, but handled programmatically by $state.go("section3");

    The other sections can be called directly but section3 would never be activated by url, otherwise it behaves like the other states

    AGGREGATE:

    .config(function($stateProvider) {  
    $stateProvider
    .state('stateSection1', {
        url: '/url1',
        views: {
            'viewPortSection1': {
                templateUrl: 'app/components/sections/views.section.1.html'
            }
        }
    }).state('stateSection2', {
        url: '/url2',
        views: {
            'viewPortSection2': {
                templateUrl: '/app/components/sections/views.section.2.html'
            }
        }
    }).state('stateSection3', {
        url: '/',
        views: {
            'viewPortSection3': {
                templateUrl: '/app/components/sections/views.section.3.html'
            }
        }
    }).state('stateSection4', {
        url: '/url4',
        views: {
            'viewPortSection4': {
                templateUrl: '/app/components/sections/views.section.4.html'
            }
        }
    }).state('stateSection5', {
        url: '/url5',
        views: {
            'viewPortSection5': {
                templateUrl: '/app/components/sections/views.section.5.html'
            }
        }
    }) 
})

    In controler when displaying section 3 programmatically:

    $state.go('stateSection3');

    In the view:

    <div id="portalContainer" class="container-fluid" style="position: relative;top:-4px;">

        <div style="position: relative;height: 5px"></div>
        <div ui-view="viewPortSection1"></div>
        <div ui-view="viewPortSection2"></div>
        <div ui-view="viewPortSection3"></div>
        <div ui-view="viewPortSection4"></div>           
        <div ui-view="viewPortSection5"></div>                                          
</div>

    And if later you have to activate views simultaneously, ui router also gives you the means, you can nest, use abstract, be careful that the empty url "/" sometimes presents problems in too complex nesting, but it is avoidable if you make it as simple as possible you can in structure

    ADDED 2:

    I attach this information, which was useful:

    https://www.genbetadev.com/javascript/ui-router-an-approach-to-flexible-routing-in-angularjs

    https://github.com/angular-ui/ui-router/wiki/Multiple-Named-views

    • 1