用戶界面內的另一個不顯示

我有一個關於Angular UI-Router及其用戶界面的問題。我在另一個內部聲明瞭三個ui視圖，唯一顯示的是名爲「languages」的視圖。我不明白爲什麼會發生這種情況，如果有人能幫上忙，那就太好了。用戶界面內的另一個不顯示

的index.html：

<div ui-view="languages"> 
    <div ui-view="dashboard"></div> 
    <div ui-view="partners"></div> 
    <div ui-view="footer"></div> 
</div>

routes.js：

angular.module('TMHM') 
.config(routeConfig); 

routeConfig.$inject = ['$stateProvider', '$urlRouterProvider']; 

function routeConfig ($stateProvider, $urlRouterProvider) { 

    $stateProvider 
    .state('home', { 
     url: '/', 
     views: { 
     'languages': { 
      templateUrl: 'views/languages/languages.html' 
     }, 
     'dashboard': { 
      templateUrl: 'views/dashboard/dashboard.html' 
     }, 
     'partners': { 
      templateUrl: 'views/partners/partners.html' 
     }, 
     'footer': { 
      templateUrl: 'views/footer/footer.html' 
     } 
     } 
    }); 

    $urlRouterProvider.otherwise('/'); 
};

這裏的Plunker代碼，雖然我不能得到那個工作： https://plnkr.co/edit/z8cFGHKVQNN623QbBUqi

來源

2016-11-07 gqmartins

請附上您的plunker代碼。 –

已添加plunker鏈接 – gqmartins

爲了更好地理解，請閱讀這些教程https://scotch.io/tutorials/angular-routing-using-ui-router https://github.com/angular-ui/ui-router/wiki/ Multiple-Named-Views＃view-names --- relative-vs-absolute-names –

我已經從來沒有見過這樣做過（路由視圖中的路由視圖）。這可能是因爲它不起作用，或者我從來沒有遇到過，我不知道。我傾向於將視圖視爲最高級別，然後將其視爲嵌套內容。

<div ng-include="mycontroller.pathToFileIWantToShow"></div> 
// alternatively, although hardcoding can be evil... 
<div ng-include="path/to/some/file.html"></div>

此：

如果是這樣的想法，我已經做了非常類似的措施，但我用NG-包括：（i目前服務於許多用戶的應用程序有此生產）允許我動態更改內容，使用綁定等，每個包含的模板可以引用自己的控制器，或者只是使用包裝它的控制器。這似乎並不重要，我嵌套多少。

來源

2016-11-07 13:49:16

有更新和工作plunker https://plnkr.co/edit/vKOr2yLUfaAfwoGyK0ws?p=preview

我創造了新的routes.html，與此內容

<h1>Routes</h1> 

<hr /> 
<div ui-view="languages"></div> 
<div ui-view="dashboard"></div> 
<div ui-view="partners"></div> 
<div ui-view="footer"></div>

而改變index.html包含

<div ui-view=""></div>

然後狀態調整是：

.state('home', { 
    url: '/', 
    views: { 
    '': { 
     templateUrl: 'routes.html' 
    }, 
    '[email protected]': { 
     templateUrl: 'languages.html' 
    }, 
    '[email protected]': { 
     templateUrl: 'dashboard.html' 
    }, 
    '[email protected]': { 
     templateUrl: 'partners.html' 
    }, 
    '[email protected]': { 
     templateUrl: 'footer.html' 
    } 
    } 
});

而且，重要的是擺脫<head>的ng-app到<html>元素

<html ng-app="TMHM"> 

    <head >

檢查here

更多細節和例子有關命名和多觀點：

來源

2016-11-07 14:11:17

這不完全是我想要的，但它幫助我解決了很多問題。非常感謝你！ – gqmartins

偉大的，如果這heplped無論如何;）享受強大的UI路由器 –

用戶界面內的另一個不顯示

回答

相關問題