Question

对于辅助功能合规性：

如何在主页上的<h1>标记内显示网页标题，同时在网站其余部分的<div>标记内显示。

我使用的是角度UI-Router，主页的状态为'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'
    })

我试过了：

<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>

我也试过

<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>

Answer 1

有a working example

原生UI-Router解决方案将由

驱动

所以，这将是我们的根html代码片段（index.html

<body> 
  ...
  <div ui-view="title">
    <h1>This is the default TITLE</h1>
  </div>

  ... // later more ui-view inlcuding unnamed ui-view=""

因此，此视图将针对目前显示内容的所有州：＆＃34; <h1>This is the default TITLE</h1>＆＃34;。换句话说，此状态将按原样显示此内容，因为它不适用于命名视图 ui-view="title" ：

.state('home', {
      url: "/home",
      templateUrl: 'tpl.html',
})

但是可能会有一个州家庭，它将改变它（它的父母将会，孩子们将获利）

.state('parent', {
      url: "/parent",
      views: {
        '' : {templateUrl: 'tpl.html', },
        'title@' : {template: "<h2>title for parent and its children family<h2>",}
      }
})
.state('parent.child', { 
      url: "/child",
      ...
})
...

另一个州家庭可能有不同的头衔：

.state('other', {
      url: "/other",
      views: {
        '' : {templateUrl: 'tpl.html', },
        'title@' : {template: "<h2>other family with this root has this title<h2>",}
      }
})

这可以重复多次。甚至任何孩子都可以通过使用视图定位的绝对命名声明自己的标题： 'title@'

更多信息，如何为所有子女家庭使用一个根状态（以后很容易将一些常见的东西应用到所有州） Angular UI Router - Nested States with multiple layouts

有关绝对视图命名的更多信息 - Angular-UI Router: Nested Views Not Working

检查here

ANGULARJS - 在主页上的h1中显示标题，在网站的其余部分显示div标签

1 个答案: