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

Question

我制作<tabset>视图以在页面中显示内容。 另外，我正在使用Bootstrap的选项卡和惰性数据加载，以便仅在活动选项卡时才初始化特定选项卡的控制器。 我可以实现选项卡的延迟加载。

<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

Answer 1

在这种情况下，应使用$ stateProvider而不是$ routeProvider。 我在这里分叉了你的朋克-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-使用ui-view而不是ng-view

<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;
});

相应地设置选项卡的active属性。

<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