javascript - data - ui router anidado vistas condiciones

ui router url

Question

¿es posible crear una vista anidada en el enrutador ui con condiciones? Las condiciones se asignan a los roles del usuario.

Por ejemplo, tengo dos tipos de usuarios: administrador y usuario . Si el usuario abre la página de configuración, entonces ui enrutador solo agrega esta vista que se le asigna a su función.

Aquí hay un ejemplo de mi código de configuración

var app = angular.module(''myApp'', [''ui.router'']);        
app.config(function ($stateProvider, $urlRouterProvider){    
    $stateProvider
        .state(''home'', {
            url: ''/home'',
            templateUrl: ''/home.html'',
            controller: ''homeController''
        })
        .state(''settings'', {
            url: ''/settings'',
            data: {
                roles: [''admin'', ''moderator'', ''user'']
            },
            views:{
                '''':{
                    templateUrl:''/settings.html'',
                },
                ''piView@settings'':{
                    data: {
                        roles: [''user'']
                    },
                    templateUrl:''/personalInformation.html''
                },
                ''permissionsView@settings'':{//load this view if user is administrator
                                            //I need some condition for this
                    data: {
                        roles: [''admin'']
                    },
                    templateUrl: ''/permissionsView.html''
                }
            },
            controller: ''settingsController''
        });         
    $urlRouterProvider.otherwise( function($injector) {
      var $state = $injector.get("$state");
      $state.go(''/home'');
    });
});

Answer 1

La vista se inyectará para cada usuario (administrador o anónimo). Pero podemos administrar qué vista. El mejor vay sería usar templateProvider .

Basado en este Q & A:

Confundiendo $ locationChangeSuccess y $ stateChangeStart

Utilicé el plunker de la fuente anterior y lo ajusté un poco

Entonces, tengamos estos dos objetivos (dentro de index.html)

<div ui-view="onlyForAdmin"></div>    
<div ui-view=""></div>

Y un público estatal, que para Admin revelará incluso el contenido de onlyForAdmin, con configuraciones como esta:

.state(''public'', {
      url: "/public",
      data: { isPublic: true },
      views: {
        ''@'' : {
          templateUrl: ''tpl.html'',
          data: { isPublic: true },
        },
        ''onlyForAdmin@'' : {
          templateProvider: [''$templateRequest'',''userService'',
            function($templateRequest,userService)
            {
              if(userService.isAdmin())
              {
                return $templateRequest("justForAdmin.html");
              }
              return ""; // other than admin will see nothing
            }
          ]
        } 
      } 
})

el contenido de justForAdmin.html (por ejemplo, <h2>just for admin</h2> ) se inyectará solo de algún servicio de autorización que el usuario encontrará como administrador ...

Verifíquelo aquí