如何在加載標籤的角度應用程序中創建鏈接？

Question

我有一個角度應用程序看起來像這樣的鏈接：

<tab ng-controller="childCtrl" heading="Children"> 
<a href="#/parent/{{parent.Id}}/child/{{child.Id}}">edit</a> 
</tab> 

我如何可以加載選項卡內的鏈接，而不是刷新整個視圖？

Answer 1

我喜歡和處理所有路由一個點其他的辦法。帶嵌套視圖的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

Answer 2

您可以在單擊鏈接時定義所選標籤內容的路徑，並使用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> 

這裏是一個演示：http://plnkr.co/edit/7SPnluxUfcNNQDyeC6yt?p=preview