Question

我有一个根index.html个文件，该文件有一个ui-view标记，主模板文件home.html被注入其中。

home.html有一个ui-view标记，需要根据当前路由进行更改。我按照官方的ui-router文档编写了app.js，但ui-view标记中的嵌套home.html没有注入视图。

结构如下：

index.html
   | home.html
      - dashboard.html
      - tables.html

index.html有一个ui-view标记，显示home.html。 home.html是一个带有ui-view标记的模板，需要根据路线显示dashboard.html或tables.html。

来源：

index.html -

<!doctype html>
<html lang="en" ng-app="app">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="lib/css/main.min.css"/>
  <script src="lib/js/main.min.js"></script>
  <script type="text/javascript" src="js/dashboard.min.js"></script>
</head>
<body ng-controller="MasterCtrl">
      <div ui-view></div>
</body>
</html>

templates / home.html -

<div id="page-wrapper" ng-class="{'open': toggle}" ng-cloak>

<!-- Sidebar -->
<div ng-include="sidebar.html" scope="" onload=""></div>
<!-- End Sidebar -->

<div id="content-wrapper">
  <div class="page-content">

    <!-- Header Bar -->
    <div ng-include="header.html" scope="" onload=""></div>
    <!-- End Header Bar -->

    <!-- Main Content -->

    <div ui-view></div>

  </div><!-- End Page Content -->
</div><!-- End Content Wrapper -->

module.js

angular.module('app', ['ui.bootstrap', 'ui.router', 'ngCookies']);

routes.js

'use strict';

angular.module('app').config(['$stateProvider', '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {

    // For unmatched routes
    $urlRouterProvider.otherwise('/');

    // Application routes
    $stateProvider

        .state('home', {
            abstract: true,
            url: '/',
            templateUrl: 'templates/home.html'
        })

        .state('home.dashboard', {
            url: '/dashboard',
            templateUrl: 'templates/dashboard.html'
        })

        .state('home.tables', {
            url: '/tables',
            templateUrl: 'templates/tables.html'
        });
    }
]);

将它们添加为路由而不继承home时，它们会正常注入index.html，这意味着路由本身并不是问题。

如何继承模板并注入视图，具体取决于路径？

Answer 1

您需要添加ui-router作为模块的依赖

angular.module('app',['ui.router'])

还要确保添加了参考资料

 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
  <!-- UI-Router -->
  <script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>

<强> DEMO

Answer 2

解决了我的问题。我从抽象状态url中删除了home标记，并将home.dashboard设置为/。

这有效：

'use strict';

angular.module('app').config(['$stateProvider', '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {

    // For unmatched routes
    $urlRouterProvider.otherwise('/');

    // Application routes
    $stateProvider

        .state('home', {
            abstract: true,
            templateUrl: 'templates/home.html'
        })

        .state('home.dashboard', {
            url: '/',
            templateUrl: 'templates/dashboard.html'
        })

        .state('home.tables', {
            url: '/tables',
            templateUrl: 'templates/tables.html'
        });
    }
]);

未注入UI路由器嵌套视图

2 个答案: