ui-sref 不工作状态答案

【问题标题】：ui-sref not working state angularjsui-sref 不工作状态
【发布时间】：2017-08-02 20:34:28
【问题描述】：

我正在做某事，我想将内容重定向到 angularjs 中的页面，但我遇到以下错误：

angular.js:12477 Error: Could not resolve 'dashboard.home' from state 'dashboard'

我的代码：

.state(
        'dashboard.home',
        {
            url: '/home',
            views: {
                "content@main": {
                    templateUrl: '/home'
                    // controller: 'HomeController',
               }
            }
        }
    )

.state(
        'dashboard',
        {
            url: '',
            parent: "main",
            views: {
                "sidebar@main": {
                    templateUrl: "/sidebar/view"
                }
            }
        })

sidebar.html.twig

 <li>
      <a ui-sref="dashboard.home">Home <span class="sr-only">(current)</span></a>
 </li>

状态“dashboard.home”存在，为什么会出现错误？

【问题讨论】：

重定向内容？
是的@slacker ..
您需要向我们提供包含所有内容的模板，很难猜出这里缺少什么。
任何我们可以看到你到底在尝试什么的小提琴或 plunker
究竟要提供什么？代码很大

标签： angularjs ui-sref

【解决方案1】：

我认为您可能正在尝试使用视图将页眉/页脚/侧边栏从内容中分离出来，这是唯一可以根据状态进行更改的内容。

我不知道您的问题到底是什么，但我可能会回答您可能正在尝试解决的更广泛的问题：

如何混合页眉/内容/页脚的视图和内容导航的嵌套声明？

解决方案：仅对页眉/内容/页脚使用视图，使用“@”通过使用默认视图（无名称）插入直接子级，并像通常没有视图一样使用大子级

// root state
.state('home', {
    url:'/home',
    views:{
        'header':{
            templateUrl: 'template/header.html',
            controller:'HeaderCtrl'

        },'sidepanel':{
            templateUrl: 'template/sidepanel.html', 
            controller:'SidePanelCtrl', 
        },'footer':{
            templateUrl: 'template/footer.html'
        }
    },
    'abstract':false
  })
  //direct child
  .state('home.main', {
      url:'/main',
      // need that for every direct child of home
      views:{
          '@':{templateUrl: 'template/main.html',
              controller: 'MainCtrl'
          }
      }        
  })
  //grandchild
  .state('home.main.child1', {
      url:'/child1',
      templateUrl: 'template/child1.html',
      controller: 'Child1Ctrl'
        // NO view anymore for grand child!!
      }        
  })

以及相关的 HTML

<section id="header">
    <!--- not container -->
    <div data-ui-view="header"></div>
</section>
<section id="content">
    <div class="row clearfix">
        <div id="mySidebar>
            <div data-ui-view="sidepanel"></div>
        </div>
        <div id="myContent">
            <div data-ui-view></div>
        </div>
    </div>
</section>
<section id="footer">
    <div data-ui-view="footer"></div>
</section>

【讨论】：

【解决方案2】：

templateUrl 需要您要呈现的 html 模板的相对路径。

.state(
    'dashboard.home',
    {
        url: '/home',
        views: {
            "content@main": {
                templateUrl: 'home.html'
           }
        }
    }).state(
    'dashboard',
    {
        url: '',
        parent: "main",
        views: {
            "sidebar@main": {
                templateUrl: "sidebar/view.html"
            }
        }
    })

【讨论】：