如何在UI中加载/呈现嵌套的UI视图路由器

我有一个叫做index.html的页面。这个页面是应用程序中的主页面，我加载了部分内容。如何在UI中加载/呈现嵌套的UI视图路由器

这里是我的Index.html：

<body> 
    <!--<div id="view" ng-view></div>--> 
    <div id="view" ui-view></div> 
</body>

我想加载一个部分到这一点，但随后的部分到部分我刚才说。

我想要添加的部分称为dashboard.html，当/dashboard命中时应该调用。然后我想加载一个内的UI-View。

我不知道我需要提供哪些其他信息才能实现此目的？

编辑：

.state('dashboard', { 
     url: '/dashboard', 
     templateUrl: 'partials/dashboard.html', 
     controller: 'dashboard' 
    }) 
    .state('dashboard.item', { 
     //url: '/dashboard/calender', 
     templateUrl: 'partials/calender.html', 
     controller: 'aceTrackerDash' 
    })

来源

2016-12-15 Ben Clarke

我已经编辑我的答案我的朋友，一起来看看 – Ramin

我的建议是要经过命名视图。请提供html的代码。 –

其良好定义的嵌套用于此目的的状态。当应用程序处于特定状态时 - 当状态为“活动”时 - 其所有祖先状态也都隐式激活。下面，当"contacts.list"状态处于活动状态时，"contacts"状态也隐式激活，因为它是"contacts.list"的父状态。因此，所有嵌套定义的视图被加载在其适当的位置：

实施例：

$stateProvider 
    .state('contacts', { 
    templateUrl: 'contacts.html', 
    controller: function($scope){ 
     $scope.contacts = [{ name: 'Alice' }, { name: 'Bob' }]; 
    } 
    }) 
    .state('contacts.list', { 
    templateUrl: 'contacts.list.html' 
    });

<!-- index.html --> 
<body ng-controller="MainCtrl"> 
    <div ui-view></div> 
</body>

<!-- contacts.html --> 
<h1>My Contacts</h1> 
<div ui-view></div>

<!-- contacts.list.html --> 
<ul> 
    <li ng-repeat="contact in contacts"> 
    <a>{{contact.name}}</a> 
    </li> 
</ul>

Plunker：http://plnkr.co/edit/7FD5Wf?p=preview

在这也看一看：

Angular-UI Router: Nested Views Not Working

来源

2016-12-15 21:10:32 Ramin

感谢您的答案我编辑我的问题，并添加了我的路由器，但这仍然不会出现？ –

@BenClarke我在这里回答你一个更完整的答案 – Ramin

如何在UI中加载/呈现嵌套的UI视图路由器

回答

相关问题