ANGULARJS - display title inside h1 on homepage and div tag for the rest of the site

梦想与她 提交于 2019-12-13 02:03:46

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!