根據用戶選擇在同一頁面上顯示內容

Question

我想在Angular控制器中應用路由。 我有多個選項卡，當用戶單擊tab2時，它將顯示用戶可以選擇的選項列表。 當用戶選擇鏈接“ Red”時，應該在tab2中同一內容區域的右側顯示red.html的內容，根據用戶的選擇，它應該在右側顯示內容。

演示在這里： https : //plnkr.co/edit/lYOaA91ddqASHR3PwULz?p=preview

在上面的代碼演示中，當用戶選擇Tab2時，tab2中顯示了一些鏈接，當用戶單擊該鏈接時，該鏈接將被路由到其他html頁面，其內容應顯示在同一選項卡的右側。

下面是當用戶在Tab2上選擇任何鏈接時用於路由的js代碼。 關於如何在控制器內執行路由的任何建議

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "main.html"
    })
    .when("/red", {
        templateUrl : "red.html"
    }).when("/green", {
        templateUrl : "green.html"
    });
});

關於如何從ng-controller內部執行路由的任何輸入。

Answer 1

使用以下HTML：

<li><a href="/">Main</a> </li>
<li><a href="/#!/red">Red</a></li>
<li><a href="/#!/green">Green</a></li>