Question

我正在尝试使用ui-router为我的角应用创建路由。我有基本的概念例子。我需要的是＆＃34;这是地图＆＃34;显示路线（总是）但是＆＃34;这是关于我们的＃34;仅在导航到#/about。

时

的index.html：

<html lang="en" >
    <head>
        <meta charset="utf-8">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script>
        <script type="text/javascript" src="<?php echo base_url('app/app.module.js'); ?>"></script>
        <script type="text/javascript" src="<?php echo base_url('app/app.config.js'); ?>"></script>
    </head>
    <body ng-app="jigup">
        <ui-view="nav"></ui-view>
        <ui-view="map"></ui-view>
        <ui-view="about"></ui-view>
    </body>
</html>

app.module.js：

(function(){
    angular.module('jigup', [
        'ui.router'
    ]);
})();

app.config.js：

(function(){
    angular
        .module('jigup')
        .config(function($stateProvider, $urlRouterProvider) {
            $urlRouterProvider.otherwise('/map');
            var map = {
                name: 'map',
                url: '/map',
                views: {
                    nav:{
                        template: '<a ui-sref="map">map</a><a ui-sref="about">About</a>'
                    },
                    map:{
                        template: 'this is map'
                    }
                }

            }

            var about = {
                name: 'about',
                url: '/about',
                views: {
                    nav:{
                        template: '<a ui-sref="map">map</a><a ui-sref="about">About</a>'
                    },
                    map:{
                        template: 'this is map'
                    },
                    about:{
                        template: 'this is about us'
                    }
                }
            }

            $stateProvider.state(map);
            $stateProvider.state(about);
        });

})();

当我导航到我的网站$urlRouterProvider.otherwise('/map');完成工作并将网址更改为..com/#/map但我得到空白页面。在检查元素时，我看到了一些奇怪的东西 - ui-views的DOM结构：

<ui-view="nav">
    <ui-view="map">
        <ui-view="about">
        </ui-view="about">
    </ui-view="map">
</ui-view="nav">

如果有人能告诉我这是否是预期的DOM结构（因为我强烈怀疑）或者指出我犯了一些错误，我将不胜感激。

Answer 1

IMO无需在您的情况下堆叠视图。只需为此runnable plnkr demo中的about创建一个视图即可。这是实现您所要求的简单解决方案。

主视图

<div>
     <div>
         <span style="width:100px" ui-sref="PageTab"><a href="">Home</a></span>
         <span style="width:100px" ui-sref=".about"><a href="">About</a></span>
     </div>
     <ng-include src="'map.html'"></ng-include>
     <div>
         <div ui-view=""></div>
     </div>
</div>

AngularJS应用程序

var myApp = angular.module("myApp", ['ui.router']);

myApp.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.when("", "/PageTab");

    $stateProvider
        .state("PageTab", {
            url: "/PageTab",
            templateUrl: "mainTemplate.html"
        })
        .state("PageTab.about", {
            url: "/about",
            templateUrl: "about.html"
        })
});

为什么ui-router改变了ui-views的DOM结构？

1 个答案:

主视图

AngularJS应用程序