UI-router nested view not being injected
Question
I have a root index.html file which has a ui-view tag, to which a main template file home.html is injected.
home.html has a ui-view tag which needs to change depending on the current route. I followed the official ui-router documentation and wrote the app.js , but the nested ui-view in home.html tag is not being injected with a view.
The structure is as follows:
index.html
| home.html
- dashboard.html
- tables.html
index.html has a ui-view tag which shows home.html . home.html is a template with a ui-view tag which needs to either show dashboard.html or tables.html depending on the route.
Source:
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'
});
}
]);
On add them as routes without inheriting from home , they're being injected normally into index.html , which means it's not an issue with the route themselves.
How can I inherit the template and inject the views, depending on the route?
2 answers
solution1
0 2016-11-29 07:29:43
You need to add ui-router as a dependency to the module
angular.module('app',['ui.router'])
also make sure you have added references
<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>
solution2
0 ACCPTED 2016-11-30 05:26:00
Solved my issue. I removed the url tag from abstract state home , and just set home.dashboard to / .
This works:
'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'
});
}
]);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.