Javascript 使用角度管段时不显示AngularJS嵌套视图_Javascript_Angularjs_View_Url Routing

Javascript 使用角度管段时不显示AngularJS嵌套视图

javascript angularjs view

Javascript 使用角度管段时不显示AngularJS嵌套视图,javascript,angularjs,view,url-routing,Javascript,Angularjs,View,Url Routing,我在移动应用程序中使用嵌套视图。我正在尝试使用此模块：但我可以看到通过XHR加载的模板，但页面上没有显示任何内容我也不确定是否正在加载控制器，示例应用程序似乎混合了将控制器引用作为字符串或按引用传递我尝试使用UI路由器取得了更大的成功，但它似乎不再支持AngularJS的最新RC动画视图，这是我必须在我的应用程序中使用的这是我的app.js： var app = angular.module('HealIntApp', ['ngRoute', 'angular-carousel', '

我在移动应用程序中使用嵌套视图。我正在尝试使用此模块：

但我可以看到通过XHR加载的模板，但页面上没有显示任何内容

我也不确定是否正在加载控制器，示例应用程序似乎混合了将控制器引用作为字符串或按引用传递

我尝试使用UI路由器取得了更大的成功，但它似乎不再支持AngularJS的最新RC动画视图，这是我必须在我的应用程序中使用的

这是我的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：

<!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>

不要使用段名称，请使用段索引号。例如：

<div class="pure-u-1" app-view-segment="0"></div>

如果需要嵌套管线，请使用app view segment=“1”等等。

如果既有嵌套管线又有非嵌套管线，该怎么办。然后呢？如何获取当前应用程序视图段索引？

app.controller('CtrlMain', function ($scope, $rootScope) {
    console.log('main controller loaded');
});

<div class="pure-u-1" app-view-segment="0"></div>