Angular + ui.router - ui-view在UI視圖父母問題中

我有以下場景：Angular + ui.router - ui-view在UI視圖父母問題中

用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', 

    })

中的layout.html我再次使用相同的用戶界面視圖：

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

])

來源

2015-01-13 Liad Livnat

我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

來源

2015-01-14 06:48:54

謝謝，我沒有找到丟失的孩子你提到，不知道它是如何工作的，你和我在做什麼錯了，我連着你可以看到有重複的圖像，也許它會給你一個我做什麼錯誤的線索.. –

有你能想到的任何變通辦法能解決我的問題？ –

最好的，我們可以做的：改變我的plunker重現該問題。我會很樂意協助，並幫助找到一種方法 –

你必須至少告訴它查看每個狀態與每個模板關聯

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

來源

2015-09-22 19:49:30 user3338098

Angular + ui.router - ui-view在UI視圖父母問題中

回答

相關問題