Question

我在这样编码的页面上有3个UI视图：

＆＃13;

<div id="wrapper">

  <div ui-view="nav"></div>

  <div id="page-wrapper" class="gray-bg">
  	<div ui-view="topbar"></div>
    <div class="wrapper wrapper-content animated fadeInRight">
		<div ui-view></div>
    </div>
   	<div ui-view="footer"></div>
</div>

＆＃13;

为部分应用配置的状态/路由如下所示：

＆＃13;

angular.module('core').config(['$stateProvider',
  function ($stateProvider) {
    $stateProvider
      .state('core', {
        abstract: true,
        url: '/core',
        views: {
          'nav@': {templateUrl:'modules/core/client/views/partials/nav.view.html'},
          'topbar@': {templateUrl:'modules/core/client/views/partials/topbar.view.html'},
          'footer@': {templateUrl:'modules/core/client/views/partials/footer.view.html'}
        },
        data: {
          roles: ['super', 'admin', 'narc']
        }
      })
      .state('core.settings', {
        url: '/settings',
        views: {
          '': {templateUrl:'modules/narc/client/views/content/canvas.list.view.html'}
        },
        data: {
          roles: ['super', 'admin', 'narc']
        }
      });
  }
]);

＆＃13;

我面临着两个问题。

当导航中的链接设置为ui-sref =＆＃34; core.settings＆＃34;和点击链接，我在资源加载中看到canvas.list.view.html，但它没有将它加载到主要的＆＃34;未命名的＆＃34;看来，我也是尝试使用命名的ui-view和相同的结果。
单击相同的链接时，会将window.location更改为配置中说明的URL，但如果我刷新页面，则为404s 因为它引用的是州而不是实际的位置...... 如果我手动一个＃！在URL前面，它会拉出一个空白页面（加载了导航栏，顶栏和页脚，但未加载任何未命名的视图。

感谢您的帮助!!

Answer 1

我通过更改

找到了上面的＃2

$locationProvider.html5Mode(true).hashPrefix('!')

到

$locationProvider.html5Mode(false).hashPrefix('!');

它允许实际复制/粘贴/共享网址，只要身份验证到位，它仍可正常工作...

我也想到了＃1，抽象的“父”状态需要一个模板：

template: '<ui-view/>'

这使一切顺利。是的！

Angular UI Route / State设计和实现无法正常工作

1 个答案: