[英]AngularJS nested views not showing when using angular route segment
I am using nested views in a mobile app. 我在移动应用程序中使用嵌套视图。 I am trying to use this module: 我正在尝试使用此模块:
http://ngmodules.org/modules/angular-route-segment http://ngmodules.org/modules/angular-route-segment
But i can see the templates getting loaded via XHR but nothing appears on page. 但是我可以看到模板通过XHR加载,但是页面上没有任何显示。
I am not sure that the controllers are being loaded either, the example app seems to mix passing the controller reference as a string or by reference. 我不确定控制器是否正在加载,示例应用程序似乎混合了将控制器引用作为字符串或按引用传递。
I tried using UI-router with more success but it no longer seems to support animated views with the latest RC of AngularJS which is something i have to have in my app. 我尝试使用UI路由器获得更大的成功,但是它似乎不再支持最新的AngularJS RC动画视图,这是我在应用程序中必须具备的功能。
This is my app.js: 这是我的app.js:
var app = angular.module('HealIntApp', ['ngRoute', 'angular-carousel', 'ngAnimate', 'ngTouch', 'route-segment', 'view-segment']);
app.config(['$routeSegmentProvider', '$routeProvider', function($routeSegmentProvider, $routeProvider){
$routeSegmentProvider.options.autoLoadTemplates = true;
$routeSegmentProvider
.when('/', 'index')
.when('/setup/charting', 'setup.charting')
.when('/setup/contacts', 'setup.contacts')
.when('/setup/medical', 'setup.medical')
.when('/setup/ready', 'setup.ready')
.when('/setup/gps', 'setup.gps')
.when('/setup/net', 'setup.net')
.when('/setup/settings', 'setup.settings')
.segment('index', {
templateUrl: 'js/app/partials/main.html',
controller: 'CtrlMain'
})
.within()
.segment('setup', {
templateUrl: 'js/app/partials/setup.html',
controller: 'CtrlSetup'
})
.within()
.segment('charting', {
templateUrl: 'js/app/partials/setup.charting.html'
})
.segment('contacts', {
templateUrl: 'js/app/partials/setup.contacts.html',
controller: 'CtrlSetupContacts'
})
.segment('medical', {
templateUrl: 'js/app/partials/setup.medical.html',
controller: 'CtrlSetupMedical'
})
.segment('ready', {
templateUrl: 'js/app/partials/setup.ready.html',
controller: 'CtrlSetupReady'
})
.segment('gps', {
templateUrl: 'js/app/partials/setup.gps.html'
})
.segment('location', {
templateUrl: 'js/app/partials/setup.location.html'
})
.segment('net', {
templateUrl: 'js/app/partials/setup.net.html'
})
.segment('settings', {
templateUrl: 'js/app/partials/setup.settings.html',
controller: 'CtrlSetupSettings'
});
}]);
My index.html: 我的index.html:
<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" lang="en" ng-app="HealIntApp">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<link rel="stylesheet" type="text/css" href="css/lib/pure-0.2.1.css" />
<link rel="stylesheet" type="text/css" href="css/lib/font-awesome.css" />
<link rel="stylesheet" type="text/css" href="css/lib/angular-carousel.css" />
<link rel="stylesheet" type="text/css" href="css/app.css" />
<title>HealInt</title>
</head>
<body>
<div class="pure-g">
<div class="pure-u-1" app-view-segment="index">
</div>
</div>
<script src="js/lib/cordova.js"></script>
<script src="js/lib/angular-1.2.js"></script>
<script src="js/lib/angular-mobile.js"></script>
<script src="js/lib/angular-touch.js"></script>
<script src="js/lib/angular-route.js"></script>
<script src="js/lib/angular-animate.js"></script>
<script src="js/lib/angular-route-segment.min.js"></script>
<script src="js/lib/angular-carousel.js"></script>
<script src="js/app.js"></script>
<script src="js/app/factory/cordova-ready.js"></script>
<script src="js/app/controllers/main-ctrl.js"></script>
<script src="js/app/controllers/setup-ctrl.js"></script>
<script src="js/app/controllers/setup-ready-ctrl.js"></script>
<script src="js/app/controllers/setup-settings-ctrl.js"></script>
<script src="js/app/controllers/setup-contacts-ctrl.js"></script>
<script src="js/app/controllers/setup-medical-ctrl.js"></script>
</body>
</html>
My main.html partial that should be pulled into the DOM at the root URL: 我的main.html部分应该被拉到根URL的DOM中:
<div class="pure-u-1">
<a href="#/setup" class="pure-button pure-button-primary">Setup</a>
</div>
And the associated controller that logs nothing: 以及相关联的控制器什么都不记录:
app.controller('CtrlMain', function ($scope, $rootScope) {
console.log('main controller loaded');
});
Do not use segment name, use segment index number. 不要使用段名称,而要使用段索引号。 Example: 例:
<div class="pure-u-1" app-view-segment="0"></div>
if you need nested route, use app-view-segment="1" and so on. 如果您需要嵌套路线,请使用app-view-segment =“ 1”,依此类推。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.