Question

我希望能够在我的应用程序中使用两个常见组件，在所有状态基本上都是标题和侧边栏。我已经阅读了文档，但我一定错过了一些东西。如何重用状态

中的标题和侧边栏

  $stateProvider
    .state('home', {
        url: '/leads:id',
        views: {
          'details': {
              templateUrl: '../views/details.html',
              controllerProvider: function($stateParams) {
                  if($stateParams.id) {
                      return 'CompanyDetails as companydetails';
                  }else {
                      return 'NewCompanyDetailsController as companydetails';
                  }

              }
          },
          'sidebar': {
              templateUrl: '../views/sidebar.html'
            },
          'header': {
              templateUrl: '../views/header.html',
              controller: 'HeaderCtrl as header'
           },
          'vehicledetails': {
              templateUrl: '../views/vehicledetails.html',
              controller: 'VehicleDetailsController as vehicledetails'
          },
          'comments': {
              templateUrl: '../views/comments.html',
              controller: 'CommentsController as comments'
          },
          'saveupdate': {
              templateUrl: '../views/saveupdate.html',
              controller: 'SaveUpdateDetailsController as saveupdate'
          }
        }

    });

我想创建另一个名为“数据”的状态。例如，它重用标题和侧边栏。如何在不需要再次记下所有组件的情况下实现这一目标？

我做了一些阅读，现在，我有一个更新的状态提供程序，显示所有路由上的公共标题和侧边栏，但实际容器内的数据根本没有显示。这是我更新的代码

$stateProvider
        .state('home', {
            abstract: true,
            views: {
              'header': {
                  templateUrl: '../views/header.html',
                  controller: 'HeaderCtrl as header'
              },
              'sidebar': {
                  templateUrl: '../views/sidebar.html'
               }
             },
             resolve: {
                  somedata: function(){return {}}
              }

        })
        .state('home.login', {
            url: '/',
            views: {
               'login@home': {
                          templateUrl: '../views/login.html'
                        }
                }
        })
        .state('home.leads', {
            url: '/leads:id',
            views: {
              'details@home': {
                  templateUrl: '../views/details.html',
                  controllerProvider: function($stateParams) {
                      if($stateParams.id) {
                          return 'CompanyDetails as companydetails';
                      }else {
                          return 'NewCompanyDetailsController as companydetails';
                      }
                  }
              },
              'vehicledetails@home': {
                  templateUrl: '../views/vehicledetails.html',
                  controller: 'VehicleDetailsController as vehicledetails'
              },
              'comments@home': {
                  templateUrl: '../views/comments.html',
                  controller: 'CommentsController as comments'
              },
              'saveupdate@home': {
                  templateUrl: '../views/saveupdate.html',
                  controller: 'SaveUpdateDetailsController as saveupdate'
               }
            }

        });

和我的index.html

<body ng-app="MyApp">
    <div id="page-wrapper" ng-class="{'open': toggle}" ng-cloak class="open" ng-controller="SlideCtrl">
        <div id="sidebar-wrapper" ui-view="sidebar">
        </div>
        <div id="content-wrapper">
            <div class="page-content">
                    <!-- Header Bar -->
                    <div class="row header" ui-view="header">
                    </div>
                    <!-- Header Bar -->
                    <div ui-view="login"></div>
                    <div ui-view="details"  class="panel panel-default col-xs-11" ></div>
                    <div ui-view="vehicledetails"  class="panel panel-default col-xs-11" ></div>
                    <div ui-view="comments"  class="panel panel-default col-xs-11" ></div>
                    <div ui-view="saveupdate"></div>
            </div>
        </div>
    </div>
    <script src="js/main.js"></script>
</body>

Answer 1

我实际上已经设法使用此链接https://stackoverflow.com/a/28826126/1679310

来实现此功能

我会解释我的答案，因为在我自己做之前我无法理解它是如何工作的。您需要将此状态存在，以便子状态插入其中。 https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#scope-inheritance-by-view-hierarchy-only

基本上你在index.html中创建一个主要的ng-view作为你的其他部分的容器，然后你基本上包含了另一个布局中的所有子ui-views，它将作为所有状态的父。

所以从本质上讲，你的结构是这样的

<body ng-app="MyApp">
<div id="page-wrapper" ng-class="{'open': toggle}" ng-cloak class="open" ng-controller="SlideCtrl">
   <div ng-view>
   </div>
</div>
<script src="js/main.js"></script>

和另一个具有布局

的文件

 <div id="sidebar-wrapper" ui-view="sidebar">
    </div>
    <div id="content-wrapper">
        <div class="page-content">
                <!-- Header Bar -->
                <div class="row header" ui-view="header">
                </div>
                <!-- Header Bar -->
                <div ui-view="login"></div>
                <div ui-view="details"  class="panel panel-default col-xs-11" ></div>
                <div ui-view="vehicledetails"  class="panel panel-default col-xs-11" ></div>
                <div ui-view="comments"  class="panel panel-default col-xs-11" ></div>
                <div ui-view="saveupdate"></div>
        </div>
    </div>

然后你基本上遵循这里的模式

  $stateProvider
    .state('home', {
        abstract: true,
        views: {
            '@': {
                templateUrl: '../views/layouts.html'
                },
            'header@home': {
                templateUrl: '../views/header.html',
                controller: 'HeaderCtrl as header'
            },
            'sidebar@home': {
                templateUrl: '../views/sidebar.html'
             }
         }
    })
    .state('home.login', {
        url: '/',
        views: {
           'login@home': {
                      templateUrl: '../views/login.html'
                    }
            }
    })

适用于所有州。这对我有用，我很确定这是正确的方法。

Answer 2

有更好的方法：

HTML部分

索引文件（index.html）：

<html ng-app="app">

<head></head>

<body ui-view></body>

</html>

基础文件（layout.html）

<header>
    Here's the header part
</header>
<aside>
    Here's the sidebar part
</aside>
<main ui-view>
    And here is where the app will be ran when you go to a state like "app.home"
</main>

国：

var states = {
    'app': {
        templateUrl: 'app/layout.html',
        controller: 'LayoutController as layout'
    },

    'app.home': {
        templateUrl: 'app/home.html',
        controller: 'HomeController as home'
    }
};

angular.forEach(states, function(config, name) {
    $stateProvider.state(name, config);
});

对不同的状态使用通用模板

2 个答案: