如何在Angular js的tabset中的选项卡上启用延迟加载？

Question

我在制作<tabset>视图以显示页面中的内容。此外，我正在使用 Bootstrap's Tabs and Lazy Data Loading，以便特定选项卡的控制器仅在其处于活动状态时才被初始化。我能够实现延迟加载标签。

<div id="panel" ng-controller="HomeController as hmctrl"> 
<tabset> 
<tab class="nav-item" id="tab_content" title="Tab1" template-url="app/components/tab1/tab1.html"></tab> 
<tab class="nav-item" id="tab_content" title="Tab2" template-url="app/components/tab2/tab2.html"></tab> 
<tab class="nav-item" id="tab_content" title="Tab3" template-url="app/components/tab3/tab3.html"></tab> 
</tabset> 
</div> 

在我的app.config我有主页

var app = angular.module('myApp', ['bootstrap.tabset','ngRoute']); 

app.config(
    function($routeProvider,$locationProvider) { 
    $routeProvider 
    .when('/', { 
     templateUrl: 'app/components/home/homeView.html' 
    }); 
}); 

每片只有一个路由有一个分配给他们一个单独的控制器。 我想知道如何分配路线到任何特定的标签时创建这种方式。以便我可以使用$location.path()函数导航到它们。

我已经创建了一个相同的plnkr这里 Plnkr for the above described scenario

Answer 1

您应该使用$ stateProvider而不是$ routeProvider在这种情况下。 我已付出你的plunker这里 - https://plnkr.co/edit/lL9JVRmuE8kQ5f0WhRDo?p=preview

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

app.config(
    function($stateProvider, $urlRouterProvider) { 
    $urlRouterProvider.otherwise("/Home"); 

    $stateProvider 
    .state('Home', { 
     url: "/Home", 
     templateUrl: "home.html" 
    }) 
    .state('Home.Tab1', { 
     url: "/Tab1", 
     templateUrl: "tab1.html" 
    }) 
    .state('Home.Tab2', { 
     url: "/Tab2", 
     templateUrl: "tab2.html" 
    }) 
    .state('Home.Tab3', { 
     url: "/Tab3", 
     templateUrl: "tab3.html" 
    }); 

}); 

的Index.html - 使用用户界面视图，而不是NG视

<div class="ui-view"></div> 

的Home.html

<div id="panel" ng-controller="HomeController as hmctrl"> 
    <p>Home</p> 
<tabset> 
<tab class="nav-item" id="tab_content" title="Tab1" ui-sref=".Tab1"></tab> 
<tab class="nav-item" id="tab_content" title="Tab2" ui-sref=".Tab2"></tab> 
<tab class="nav-item" id="tab_content" title="Tab3" ui-sref=".Tab3"></tab> 
</tabset> 

<div ui-view></div> 
</div> 

的网址为＃/ Home/Tab1，＃/ Home/Tab2，＃/ Home/Tab3，您可以强制导航到以下状态：

$state.go("Home.Tab2");//navigates to Tab2 of Home page 

更多关于此状态提供商 - https://github.com/angular-ui/ui-router

请务必参阅状态提供脚本，并在您的应用程序注入该模块

Answer 2

你可以单独的路由添加到每个标签，

app.config(
    function($routeProvider,$locationProvider) { 
    $routeProvider 
    .when('/', { 
     templateUrl: 'app/components/home/homeView.html' 
     controller:'HomeCtrl' 
    }); 
    .when('/Tab1', { 
     templateUrl: 'app/components/tab1/Tab1.html', 
     controller:'Tab1Ctrl' 
    }); 
}) 

Answer 3

可以使用$routeParams服务。看看下面的示例代码。

更改您的路由配置以包含选项卡标识符。

app.config(
    function($routeProvider,$locationProvider) { 
    $routeProvider 
    .when('/:tabId', { 
     templateUrl: 'app/components/home/homeView.html', 
     controller:'HomeController' 
    }); 
}); 

然后在你HomeController您可以访问$routeParams服务来获得的tabId当前值。

app.controller('HomeController', function($scope, $routeParams) { 
    $scope.activeTab = $routeParams.tabId; 
}); 

相应地设置标签的活动属性。

<tab active="{{activeTab == 1}}" class="nav-item" id="tab_content" title="Tab1" template-url="app/components/tab1/tab1.html" active="{{activeTab == 1}}"></tab> 
<tab active="{{activeTab == 2}}" class="nav-item" id="tab_content" title="Tab2" template-url="app/components/tab2/tab2.html"></tab> 
<tab active="{{activeTab == 3}}" class="nav-item" id="tab_content" title="Tab3" template-url="app/components/tab3/tab3.html"></tab> 

然后，你可以打电话给你的标签为<baseurl>/1，<baseurl>/2