javascript - 具有不同 Controller 的选项卡

Question

在我的 angular.js 应用程序中，我有一个带有各种选项卡的配置文件 View ，每个选项卡都是一个嵌套 View ，带有自己的 Controller 。我想要做的是能够来回点击不同的选项卡，但始终保持在个人资料 View 中。

但每次我单击其中一个选项卡时，例如带有 url“/nested_view_1”和 templateUrl:“nested_view_1.html”的“nested_view_1”，它会将路径更改为“/nested_view_1”并呈现一个空白页面(因为我没有在我的 $routeProvider 中指定“/nested_view_1”)。只有当我单击返回时，它才会在我的 View 中显示我选择的选项卡内容

可能是我同时使用 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

用父路由 parent 为你的嵌套路由添加前缀。

$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'
         }
       }
     })