UI路由器嵌套視圖未注入

Question

我有一個帶有ui-view標記的根index.html文件，一個主模板文件home.html被注入其中。

home.html具有ui-view標記，需要根據當前路線進行更改。 我遵循了官方的ui-router文檔，並編寫了app.js ，但是home.html標記中的嵌套ui-view沒有注入視圖。

結構如下：

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

index.html有一個顯示home.html的ui-view標簽。 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>

演示

Answer 2

解決了我的問題。 我從抽象狀態home刪除了url標記，只是將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 個解決方案

解決方案1
0 2016-11-29 07:29:43

解決方案2
0 已采納 2016-11-30 05:26:00

UI路由器嵌套視圖未注入

問題描述

2 個解決方案

解決方案1 0 2016-11-29 07:29:43

解決方案2 0 已采納 2016-11-30 05:26:00

解決方案1
0 2016-11-29 07:29:43

解決方案2
0 已采納 2016-11-30 05:26:00