如何在 Angular js 的选项卡集中启用延迟加载?
Posted
技术标签:
【中文标题】如何在 Angular js 的选项卡集中启用延迟加载?【英文标题】:How to enable lazy loading on tabs in tabset in Angular js? 【发布时间】:2016-12-26 10:17:42 【问题描述】:我制作<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
【问题讨论】:
【参考方案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 - 使用 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>
网址将是 #/Home/Tab1 ,#/Home/Tab2, #/Home/Tab3 ,您可以通过以下方式强制导航到该州:
$state.go("Home.Tab2");//navigates to Tab2 of Home page
在此处了解有关状态提供者的更多信息 - https://github.com/angular-ui/ui-router
确保您引用状态提供程序脚本并将此模块注入您的应用程序
【讨论】:
【参考方案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'
);
)
【讨论】:
我添加了一个 plnkr 代码 sn-p 请检查一下,你会知道我试图描述的情况【参考方案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
【讨论】:
这不适用于我试图解释的场景,我已经为我试图解释的相同添加了一个 plunkr,每个选项卡都有一个单独的控制器。 我明白,在你的 plunkr 中,你已经做到了。我刚刚为您提供了一种方法,可以根据路线使标签成为焦点。您能否更清楚地解释您在使用此解决方案时遇到的问题? 所有选项卡控制器一起触发,如果我更改 url,选项卡也不会更改以上是关于如何在 Angular js 的选项卡集中启用延迟加载?的主要内容,如果未能解决你的问题,请参考以下文章
Angular JS UI Bootstrap 选项卡 (ui.bootstrap.tabs) 导致页面在选择时滚动/跳转
带有 oidc-client.js 的 Angular 应用程序需要在第二个选项卡中登录