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

我制作 <tabset> View 以显示页面中的内容。我也在使用
Bootstrap's Tabs and Lazy Data Loading 以便特定选项卡的 Controller 仅在其处于事件状态时才初始化。我能够实现选项卡的延迟加载。

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

每个选项卡都有一个单独的 Controller 分配给它们。
我想知道以这种方式创建时如何将路由分配给任何特定的选项卡。这样我就可以使用 $location.path() 函数导航到它们。

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

最佳答案

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

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

主页.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>

url 将是 #/Home/Tab1 ,#/Home/Tab2, #/Home/Tab3 并且您可以通过以下方式强制导航到状态:

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

更多关于状态提供者的信息 - https://github.com/angular-ui/ui-router

确保您引用状态提供程序脚本并将此模块注入(inject)您的应用程序

关于javascript - 如何在 Angular js 中的选项卡集中的选项卡上启用延迟加载？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39035893/