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