我有一个角度应用程序看起来像这样的链接:如何在加载标签的角度应用程序中创建链接?
<tab ng-controller="childCtrl" heading="Children">
<a href="#/parent/{{parent.Id}}/child/{{child.Id}}">edit</a>
</tab>
我如何可以加载选项卡内的链接,而不是刷新整个视图?
我有一个角度应用程序看起来像这样的链接:如何在加载标签的角度应用程序中创建链接?
<tab ng-controller="childCtrl" heading="Children">
<a href="#/parent/{{parent.Id}}/child/{{child.Id}}">edit</a>
</tab>
我如何可以加载选项卡内的链接,而不是刷新整个视图?
我喜欢和处理所有路由一个点其他的办法。带嵌套视图的ui.router允许执行此操作。
模板
<div ><a ui-sref="home.tab1" >Tab1</a></div>
<div><a ui-sref="home.tab2" >Tab2</a></div>
<br>
<div ui-view="tabs"></div>
应用
var app = angular.module('plunker', ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'main.html',
controller: 'MainCtrl',
virtual: true
})
.state('home.tab1', {
url: '/tab1',
views: {
tabs: {
templateUrl: '1.html'
}
}
})
.state('home.tab2', {
url: '/tab2',
views: {
tabs: {
templateUrl: '2.html'
}
}
});
$urlRouterProvider
.otherwise('/home/tab1');
})
和演示http://plnkr.co/edit/r1jPgkMnPAMlI34gZrMA?refresh&p=preview
您可以在单击链接时定义所选标签内容的路径,并使用ng-include
来显示它。
<div ng-repeat="parent in parents">
<div ng-repeat="child in parent.children">
<a href="" ng-click="selectPath(parent, child);">
Parent {{parent.Id}}, Child {{child.Id}}
</a>
</div>
</div>
<div ng-include="selected.path"></div>
这真的很有趣! – 2014-12-02 18:31:58
希望我能downvote此评论 – 2015-01-29 19:48:25
因为它困扰你,我已经删除了评论。 – SoluableNonagon 2015-01-30 22:27:38