Angular UI路由器没有更新布局视图

我一直坚持了几个小时。 2列布局加载，但状态视图不加载。所有的视图路径是正确的，我没有得到任何错误。我搜索了答案，但找不到任何东西。Angular UI路由器没有更新布局视图

angular.module('App', [ 
    'ngAnimate', 
    'ngCookies', 
    'ngResource', 
    'ngRoute', 
    'ngSanitize', 
    'ngTouch', 
    'firebase', 
    'firebase.ref', 
    'firebase.auth', 
    'ui.router' 
    ]) 
    .config(['$stateProvider', 
     function($stateProvider) { 

      $stateProvider 
       .state('root', { 
        url: '', 
        abstract: true, 
        views: { 
         'layout': { 
          templateUrl: 'views/partials/layout/1-column.html' 
         } 
        } 
       }).state('root.home', { 
        url: '/', 
        views: { 
         '[email protected]': { 
          templateUrl: 'views/partials/layout/2-column.html' 
         }, 
         'header': { 
          templateUrl: 'views/partials/layout/sections/header.html' 
         }, 
         'sidebar': { 
          templateUrl: 'views/partials/layout/sections/sidebars/loginSidebar.html' 
         }, 
         'main': { 
          templateUrl: 'views/partials/layout/sections/main.html' 
         }, 
         'footer': { 
          templateUrl: 'views/partials/layout/sections/footer.html' 
         } 
        } 
       }) 
    }])

下面是HTML代码：

的index.html

<div class="container"> 
     <div ui-view="layout"></div> 
    </div>

1- column.html

<div> 
    layout 1 
    <section class="col-md-12"> 
    <div ui-view="header"></div> 
    </section> 



    <section class="main col-md-12"> 
     <div ui-view="main"></div> 
    </section> 

    <section class="col-md-12"> 
    <div ui-view="footer"></div> 
    </section> 
</div>

2- column.html

<div> 
    layout2 
    <section class="col-md-12"> 
    <div ui-view="header"></div> 
    </section> 


    <section class="sidebar col-md-2"> 
     <div ui-view="sidebar"></div> 
    </section> 


    <section ngclass="main col-md-10"> 
     <div ui-view="main"></div> 
    </section> 

    <section class="col-md-12"> 
    <div ui-view="footer"></div> 
    </section> 
</div>

来源

2016-03-02 rastacide

添加您的HTML代码 –

此外，我希望你有一个默认的$ urlRouterProvider？ –

是的，$ urlRouterProvider是默认值。 – rastacide

你必须相对路径添加到您的意见.STATE（ 'root.home'）：

'header' -> '[email protected]' 
'sidebar' -> '[email protected]' 
'main' -> '[email protected]' 
'footer' -> '[email protected]'

见文件：https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views

也请记住，在状态 '根' 您应用程序没有关于“footer”和“header”等子视图的信息。在'root.home'状态下，但是'root'状态下的'layout'视图会被'root.home'状态下的相同名称的视图覆盖。所以无论如何，用你目前的方法你不会得到2列布局:)

P.S.此外，在你的情况下，你应该做2个视图的一个状态 - 第一列和第二列之一。

来源

2016-03-02 06:47:36

鲍里斯你是我的#hero！ – rastacide

Angular UI路由器没有更新布局视图

回答

相关问题