不同控制器的選項卡

Question

在我的angular.js應用程序中，我有一個包含各種選項卡的配置文件視圖，每個選項卡都是一個嵌套的視圖，並帶有它自己的控制器。我想要做的是能夠點擊不同的標籤，但始終保留在配置文件視圖中。但每當我點擊其中一個選項卡，例如「nested_view_1」與url「/ nested_view_1」和templateUrl：「nested_view_1.html」，它將路徑更改爲「/ nested_view_1」並呈現空白頁（因爲我沒有在我的$routeProvider中指定「/ nested_view_1」）。只有當我點擊後，它會在我的視圖中顯示我選擇的選項卡內容。

可能是我同時使用ui.router和ng-route的問題。

這裏是我的app.js文件：

var app = angular.module('app', ['ngRoute', 'ui.router','ui.bootstrap','ui.bootstrap.tpls'])  

app.config(['$routeProvider', '$stateProvider' ,function ($routeProvider, $stateProvider) { 

    $routeProvider 
    .when('/', { 
     templateUrl: '/app/views/home.html', 
     controller: 'HomepageCtrl' 
    }) 
    .when('/articles', { 
     templateUrl: 'app/views/articles/index.html', 
     controller: 'ArticlesCtrl' 
    }) 
    .when('/articles/:id', { 
     templateUrl: 'app/views/articles/show.html', 
     controller: 'ShowArticleCtrl' 
    }) 
    ... other routes ... 

    $stateProvider 
     .state('profile', { 
     abstract: true, 
     url: '/profile', 
     templateUrl: "app/views/users/profile.html", 
     controller: 'UserShowCtrl' 
     }) 
    .state('nested_view_1', { 
     url: '/nested_view_1', 
     views: { 
     "tabContent": { 
      templateUrl: 'app/views/users/sales.html', 
      controller: 'UserSalesAreaCtrl' 
     } 
     } 
    }) 
    .state('nested_view_2', { 
     url: "/nested_view_2", 
     views: { 
     "tabContent": { 
      templateUrl: 'app/views/users/buys.html', 
      controller: 'UserAreaCtrl' 
     } 
     } 
    }) 
    .... all the way to nested view 4, in my case 
}]) 

我的觀點：

<ul class="nav nav-tabs mt-50" > 
    <li ng-repeat="t in tabs" class="nav-item" heading="{{t.heading}}" active="t.active"> 
    <a ui-sref="{{t.route}}" style="font-weight: 200;" class="nav-link" ng-class="{'active'}" > 
     {{ t.heading }} 
    </a> 
    </li> 
    <div ui-view="tabContent"></div> 
</ul> 

我UserShowCtrl

angular.module('app').controller('UserShowCtrl', ['$scope', 'user', '$routeParams', '$location', '$state', 
    function ($scope, user, $routeParams, $location, $state) { 

    $scope.tabs = [ 
    { heading: 'nested_view_1', route:'nested_view_1', active:true }, 
    { heading: 'nested_view_2', route:'nested_view_2', active:false }, 
    { heading: 'nested_view_3', route:'nested_view_3', active:false }, 
    { heading: 'nested_view_4', route:'nested_view_4', active:false } 
    ]; 

}]); 

Answer 1

前綴您與父路徑父嵌套的路線。

$stateProvider 
     .state('profile', { 
     abstract: true, 
     url: '/profile', 
     templateUrl: "app/views/users/profile.html", 
     controller: 'UserShowCtrl' 
     }) 
    .state('profile.nested_view_1', { 
     url: '/nested_view_1', 
     views: { 
     "tabContent": { 
      templateUrl: 'app/views/users/sales.html', 
      controller: 'UserSalesAreaCtrl' 
     } 
     } 
    }) 
    .state('profile.nested_view_2', { 
     url: "/nested_view_2", 
     views: { 
     "tabContent": { 
      templateUrl: 'app/views/users/buys.html', 
      controller: 'UserAreaCtrl' 
     } 
     } 
    })