javascript - start - Variable ui-router angular en vista anidada

ui-sref angularjs example

Question

Actualmente estoy trabajando en una aplicación donde tengo varias vistas anidadas, que se ven así:

- ui-view 
  - ui-view="header"
  - ui-view="nav"
  - ui-view="body"

Mis estados se definen de la siguiente manera:

.state(''index'', {
   url: '''', // default route
   templateUrl: ''welcome.html''
})
.state(''app'', {
    abstract: true,
    templateUrl: ''app.template.html'' // This template contains the 3 different ui-views
})

// I''m using a different state here so I can set the navigation and header by default
.state(''in-app'', { 
    parent: ''app'',
    abstract: true,
    views: {
       ''nav@app'': { ''...'' },
       ''header@app'': { ''...'' }
    }
})

// In-app routes
.state(''dashboard'', {
     parent: ''in-app'',
     url: ''/app/dashboard''
     views: {
         ''body@app'': { ''...'' }
    }
})
.state(''users'', {
     parent: ''in-app'',
     url: ''/app/users''
     views: {
         ''body@app'': { ''...'' }
    }
})
.state(''settings'', {
     parent: ''in-app'',
     url: ''/app/settings''
     views: {
         ''body@app'': { ''...'' }
    }
})

Por el momento, esto funciona muy bien, pero para las in-app routes me gustaría definir un título que se muestra en la vista del header@app .
Cuál sería la mejor forma de hacer esto? Por el momento, solo puedo pensar en establecer una variable en $rootScope o enviar un evento. Pero para los dos necesitaría un controlador.

¿Hay alguna manera de que pueda hacer esto directamente desde la configuración de mi ruta?

Answer 1

La aplicación de muestra del UI-Router usa este código:

ui-router / sample / app / app.js

.run(
[ ''$rootScope'', ''$state'', ''$stateParams'',
    function ($rootScope, $state, $stateParams) {
    // It''s very handy to add references to $state and $stateParams to the $rootScope
    // so that you can access them from any scope within your applications.For example,
    // <li ng-class="{ active: $state.includes(''contacts.list'') }"> will set the <li>
    // to active whenever ''contacts.list'' or one of its decendents is active.
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
}])

Y eso significa que con los data : {} función:

Adjunte datos personalizados a objetos de estado

Puede adjuntar datos personalizados al objeto de estado (recomendamos utilizar una propiedad de datos para evitar conflictos).

// Example shows an object-based state and a string-based state
var contacts = { 
    name: ''contacts'',
    templateUrl: ''contacts.html'',
    data: {
        customData1: 5,
        customData2: "blue"
    }  
}

Podemos hacer esto:

.state(''in-app'', { 
    parent: ''app'',
    abstract: true,
    views: {
       ''nav@app'': { ''...'' },
       ''header@app'': { ''...'' }
    }
    data: { title : "my title" },
})

Y úsalo en alguna plantilla como:

<div>{{$state.current.data.title}}</div>

Un resumen

• Podemos colocar state y params en $ rootScope, para que podamos acceder sin ningún controlador.
• Podemos declarar algunas cosas más personalizadas a través de data y usarlas como un título ... anyhwere