用户界面内的另一个不显示

我有一个关于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路由器 –

用户界面内的另一个不显示

回答

相关问题