ANGULARJS - 在主页的 h1 内显示标题和网站其余部分的 div 标签 [英] ANGULARJS - display title inside h1 on homepage and div tag for the rest of the site
问题描述
对于可访问性合规性:
如何在首页的 <h1> 标签内显示页面标题，而在 <div> 标签内显示页面的其余部分网站.
我正在使用 angular UI-Router，主页的状态为 'home'.
app.js:
magApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) {$urlRouterProvider.otherwise("/404");//现在设置状态$stateProvider.state('page_404', {templateUrl: 'apps/templates/404.html'}).state('家', {网址:'/'，templateUrl: 'apps/templates/home.html',控制器:'问题控制器'})我已经尝试过:
<a href="/">站点名称</a></h1><div date-ng-if="!home" class="uwm-site-title"><a href="/">站点名称</a></div>
我也试过
<h1 data-ng-show="$state.current.name === 'home'" class="uwm-site-title"><a href="/">站点名称</a></h1><div data-ng-show="$state.current.name !=='home'" class="uwm-site-title"><a href="/">站点名称</a></div>有 一个工作示例
原生 UI-Router 解决方案将由
所以，这将是我们的根 html 代码片段 (index.html
...<div ui-view="title"><h1>这是默认标题</h1>...//后来更多 ui-view inlcuding unnamed ui-view=""
因此，此视图将针对此时所有状态显示内容:This is the default TITLE
ui-view="title":
.state('home', {网址:/家"，templateUrl: 'tpl.html',})但可能有一个州家庭，这会改变它(它的父母会，孩子们会从中受益)
.state('父', {网址:/父母"，意见:{'' : {templateUrl: 'tpl.html', },'title@' : {template: " 父母及其子女家庭的标题",}}}).state('parent.child', {网址:/孩子"，...})...
另一个州家庭可能有不同的头衔:
.state('其他', {网址:/其他"，意见:{'' : {templateUrl: 'tpl.html', },'title@' : {template: " 具有此根的其他家庭拥有此标题 ",}}})
这可以重复多次.甚至任何孩子都可以通过使用视图定位的绝对命名来声明自己的标题:'title@'
更多信息，如何为所有儿童家庭使用一个根状态(后来很容易将一些常见的东西应用于所有状态) Angular UI 路由器 - 具有多个布局的嵌套状态
更多关于绝对视图命名 - Angular-UI 路由器:嵌套视图不起作用
检查它这里
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>
There is a working example
The native UI-Router solution would be driven by
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
这篇关于ANGULARJS - 在主页的 h1 内显示标题和网站其余部分的 div 标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
