Question

我有以下情况：

以Angular编写的移动应用程序。

没有特殊布局的登录页面 - 简单页面。
主页，包含页眉和页脚等特殊布局。
内部页面，也包括页眉和页脚。

所以我希望能够使用两个布局1-空白2-页眉和页脚。

在我的index.html页面上我添加了：

<div ui-view class="app-content"></div>

这是我的州提供者的样子：

    .state('layout', {
        templateUrl: 'partials/mobile/layout.html',
        reloadOnSearch: false
    })
    .state('homepage', {
        url: "/",
        templateUrl: 'partials/mobile/home.html',
        parent: 'layout',
    })
    .state('internal-page', {
        url: "/internal/:id",
        templateUrl: 'partials/mobile/internal.html',
        parent: 'layout',
        controller:'InternalController',
    })     
    .state('login', {
        url: "/login",
        templateUrl: 'partials/mobile/login.html',
        controller: 'MobileLoginController',

    })

我再次使用了相同的ui-view：

<!-- App Body -->
    <div class="app-body" ng-class="{loading: loading}">
        <div class="app-content">
            <div ui-view></div>
        </div>
    </div>

结果是重复的视图，当我使用布局时，我得到两次相同的视图。

问题： 有人可以解释我做错了什么，如何在不重复页面的情况下将ui-view嵌套在另一个内部？

enter image description here

我的index.html完整页面：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <base href="" />
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
    <meta name="apple-mobile-web-app-status-bar-style" content="yes" />
    <link rel="stylesheet" href="bower_components/mobile-angular-ui/dist/css/mobile-angular-ui-hover.css" />
    <link rel="stylesheet" href="bower_components/mobile-angular-ui/dist/css/mobile-angular-ui-base.css" />
    <link rel="stylesheet" href="bower_components/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.css" />
    <link rel="stylesheet" href="css/mobile/layout.css"/>

    <script src="bower_components/angular1.3/angular.js"></script>
    <script src="bower_components/angular1.3/angular-route.js"></script>
    <script src="bower_components/angular-touch/angular-touch.min.js"></script>
    <script src="bower_components/mobile-angular-ui/dist/js/mobile-angular-ui.js"></script>
    <script src="bower_components/mobile-angular-ui/dist/js/mobile-angular-ui.gestures.js"></script>
    <script src="bower_components/mobile-angular-ui/dist/js/mobile-angular-ui.migrate.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.min.js"></script>
    <script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
    <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/angular-websocket/angular-websocket.js"></script>


    <script src="js/common/app.js"></script>
    <script src="js/mobile/app.js"></script>

    <script src="js/common/services.js"></script>
    <script src="js/common/controllers.js"></script>
    <script src="js/common/filters.js"></script>

    <script src="js/mobile/controllers.js"></script>
    <script src="js/mobile/directives.js"></script>
    <script src="js/mobile/services.js"></script>
</head>
<body ng-app="myApp" ng-controller="ApplicationController" ng-swipe-right="swipe('right')" ng-swipe-left="swipe('left')">
<div data-ng-show="loading" class="app-content-loading">
    <div class="spinner-background">
        <div class="loader-image"></div>
    </div>
</div>
<div ui-view class="app-content"></div>
<div ui-yield-to="modals"></div>
</body>
</html>

我的app.js页面：

angular.module('myApp', [
    'myApp.common',
    'ngRoute',
    'ngTouch',
    'ui.router',
    'ui.bootstrap',
    'mobile-angular-ui',
    'ngCookies',
    'myApp.filters',
    'myApp.services',
    'myApp.services.mobile',
    'myApp.directives',
    'myApp.controllers',
    'myApp.controllers.mobile',
    'mobile-angular-ui.gestures',
    'mobile-angular-ui.migrate',
    'angular-websocket'

])

Answer 1

我created working plunker - 但 1：1 包含您的问题摘要。根据您展示的代码，我必须说：

所有（显示）代码都正确且有效。问题出在其他地方......

可能有些人遗失ui-view其他地方

<div class="app-body" ng-class="{loading: loading}">
    <div class="app-content">
        <div ui-view></div>
    </div>
    // suspected to me is lost child ... with the ui-view attribute
    <div ui-view></div> // doubled target declaration
</div>

检查您的代码是否有效here

Answer 2

你必须至少告诉每个州要与每个模板关联的视图

.state('homepage', {
    url: "/",
    views: {
      'parentview': {
        templateUrl: 'partials/mobile/home.html'
      }
    },
    parent: 'layout',
})
....
.state('internal-page', {
    url: "/internal/:id",
    views: {
      'subview': {
        templateUrl: 'partials/mobile/internal.html',
        controller:'InternalController'
      }
    }
    parent: 'layout'
})

模板

<div ui-view="parentview" class="app-content"></div>

Angular + ui.router - ui-view里面的ui-view育儿问题

2 个答案: