问题
For accessibility compliance:
How do I display the title of the page inside an <h1>
tag on the homepage, while display inside a <div>
tag for the rest of the site.
I am using angular UI-Router
, with the homepage having a state of 'home'
.
app.js:
magApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise("/404");
// Now set up the states
$stateProvider
.state('page_404', {
templateUrl: 'apps/templates/404.html'
})
.state('home', {
url: '/',
templateUrl: 'apps/templates/home.html',
controller : 'issueController'
})
I have tried:
<h1 data-ng-if="home" class="uwm-site-title">
<a href="/">Site Name</a></h1>
<div date-ng-if="!home" class="uwm-site-title">
<a href="/">Site Name</a></div>
I have also tried
<h1 data-ng-show="$state.current.name === 'home'" class="uwm-site-title">
<a href="/">Site Name</a></h1>
<div data-ng-show="$state.current.name !== 'home'" class="uwm-site-title">
<a href="/">Site Name</a></div>
回答1:
There is a working example
The native UI-Router
solution would be driven by
- Multiple Named Views
- Nested States and Nested Views
So, this would be our root html code snippet (index.html
<body>
...
<div ui-view="title">
<h1>This is the default TITLE</h1>
</div>
... // later more ui-view inlcuding unnamed ui-view=""
So, this view will for all the states at this moment showing the content: "<h1>This is the default TITLE</h1>
". Other words, this state will show this content as is, because it does not work with named view ui-view="title"
:
.state('home', {
url: "/home",
templateUrl: 'tpl.html',
})
But there could be one state family, which will change it (parent of it will, children will profit)
.state('parent', {
url: "/parent",
views: {
'' : {templateUrl: 'tpl.html', },
'title@' : {template: "<h2>title for parent and its children family<h2>",}
}
})
.state('parent.child', {
url: "/child",
...
})
...
Another state family could have different title:
.state('other', {
url: "/other",
views: {
'' : {templateUrl: 'tpl.html', },
'title@' : {template: "<h2>other family with this root has this title<h2>",}
}
})
This could be repeated as many times. And even any child could declare its own title just by using the absolute naming for view targeting: 'title@'
Some more info, how to use one root state for all children families (later easy to apply some common stuff to all states) Angular UI Router - Nested States with multiple layouts
More about absolute view naming - Angular-UI Router: Nested Views Not Working
Check it here
来源:https://stackoverflow.com/questions/30268800/angularjs-display-title-inside-h1-on-homepage-and-div-tag-for-the-rest-of-the