使用angular-ui-router覆盖命名视图模板

Question

在root.app.work状态或/work url内，如何将其页面模板更改为<div>wtf</div> 。

更新：我不能让root.app.work.show正确路由？ 转到404

//routes.js

.config(function ($stateProvider, $urlRouterProvider, $locationProvider ) {

    // $provide.decorator('$sniffer', function($delegate) {
    //   $delegate.history = false;
    //   return $delegate;
    // });
    $urlRouterProvider.otherwise('/404');
    $urlRouterProvider.when('/', '/menu');


    $stateProvider
    .state('root', {
      url: '/',
      abstract: true,
      views: {
        '': {
          templateUrl: 'components/main.html',
          controller: 'MainCtrl'
        },

      }
    })
    .state('root.app', {
      url: '',
      views: {
        'menu': {
          templateUrl: 'components/menu/menu.html',
          controller: 'MenuCtrl'
        },
        'page': {
          templateUrl: 'components/page/page.html',
          controller: 'PageCtrl'

        },
        'post': {
          templateUrl: 'components/post/post.html',
          controller: 'PostCtrl'
        },
      }
    })
    .state('root.app.menu', {
      url: 'menu',

    })
    //***********        UPDATEEEE **********//
    //*********** I wnat to change this one here **********//
    .state('root.app.work', {
  url: 'work',
  data: {
    pageTitle: 'work',
    description: 'work desc'
  },
  views: {
    'page@root': {
      template: 'work template view',

    },

  }
})
.state('root.app.work.show', {
  url: ':workSlug',
  data: {
    pageTitle: 'work',
    description: 'work desc'
  },
  views: {
    'page@': {
      template: 'work template view',

    },
    'post@root': {
      template: 'work post template view',

    },

  }
})
    .state('root.app.portfolio', {
      url: 'portfolio'
    })
    .state('root.app.blog', {
      url: 'blog'
    })
    .state('root.app.contact', {
      url: 'contact'
    });
    $locationProvider.html5Mode(false).hashPrefix('!');
  })

HTML：

//index.html
<body>

  <div ui-view></div>
</body>
//main.html
<div ui-view="menu"></div>
<div ui-view="page"></div>
<div ui-view="post"></div>
//all templates
<p>This is the {{view.name}} view.</p>

Answer 1

将page@更改为page@root可能适合您