在angularjs中按需加载选项卡的内容 [英] Load contents of tabs on demand in angularjs
本文介绍了在angularjs中按需加载选项卡的内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我创建了一个标签结构作为水平标签组。每个水平制表符中都会有多个垂直制表符。
在每个垂直制表符中，我使用iframe绑定用户控件。
当页面加载时，所有用户所有标签中的控件同时加载，这会影响页面的性能。
这是我的HTML
< div ng-app = myApp >
< div ng-controller = MainCtrl >
< div class = tabbable padTop10 >
< ul class = nav nav-tabs >
< li ng-repeat = hzab in horzTabs track by $ index ng-class = {'有效'：hTab.active} > < a ng-单击 = setActive（hTab，true） > {{hTab.SSHVSettingsTabGroupName}} < / a > < / li >
< / ul >
< div class = tab-content >
< div class = tab-pane ng-class = {'active'：hTab .active} ng-repeat = hzab in horzTabs追踪$ index >
< div ng-if = hTab.SSHVSettingsTabInfo class = tabbable tabs-left >
< ul class = nav nav-tabs >
< li ng-repeat = vTab in hTab.SSHVSettingsTabInfo track by $ index ng- class = {'active'：vTab.active} >
< a ng-click = setActive（vTab，false）; > {{vTab.TabCaption}} < / a >
< / li >
< / ul >
< div class = tab-content col-pad-10 borderAll tabContentCustom >
< div class = tab-pane ng-repeat = vTab in hTab.SSHVSettingsTabInfo track by $ index ng-class = {'active'：vTab.active} >
< ext-iframe ng-if = vTab.URL src = {{vTab.URL}} 名称 = {{vTab.TabName}} > < / ext-iframe >
< / div >
< span class =code-keyword>< div ng-if = hTab.URL >
< div class = tab-content >
< div class = tab-pane < span class =code-attribute> ng-class = {'active'：hTab.active } >
< ext-iframe ng-if = hTab.URL src = {{hTab.URL}} 名称 = < span class =code-keyword> {{hTab.TabName}} > < / ext-iframe >
< / div >
< / div > ;
< / div >
< / div >
< / div >
< / div >
< < span class =code-leadattribute> / div >
< ; / div >
< / div >
< / div >
这是我的js：
var app = angular.module（' myApp'，[]）;
app.controller（' MainCtrl'， function （$ scope，$ sce）{
$ scope.iMainTabIndex = 0 ;
$ scope.horzTabs = tabCollection;
$ scope.currentHTab = $ scope.horzTabs [$ scope.iMainTabIndex];
$ scope.currentHTab.active = true ;
$ scope.currentVTab = $ scope.currentHTab.SSHVSettingsTabInfo [ 0 ];
$ scope.currentVTab.active = true ;
$ scope.iTab1Index = 0 ;
$ scope.setActive = function （tab，horz）{
var tabdir;
if （horz）tabdir = ' H';
else tabdir = ' V'
tab.active = 真;
if （$ scope [' current' + tabdir + ' Tab']）{
$ scope [' 当前' + tabdir + ' Tab']。active = false ;
}
$ scope [' current' + tabdir + Tab'] = tab;
}
}）;
app.directive（' extIframe'，[
function （）{
return {
restrict ：' E'，
范围：{
src： @，
name： @
}，
模板：' < iframe seamless =seamlessclass =dynamicHeightwidth =100％frameborder =0src ={{\'../ SettingControls / ControlViewer .aspx？usName = \'+ name + \'& src = \'+ src}}>< / iframe&g t;'
};
}
]）
angular.module（' myApp' ）。config（ function （$ sceDelegateProvider）{
$ sceDelegateProvider.resourceUrlWhitelist（[' **']）;
}）;
ControlViewer.aspx页面将保持用户控件。
只有当用户点击选项卡时，是否可以在iframe中加载用户控件？
有没有更好的方法来加载用户控件选项卡？
我尝试了什么：
我不是很非常熟悉angularjs。我尝试为每个选项卡创建isLoaded属性，并仅在用户单击选项卡时将其设置为true。
但是当页面加载时所有用户控件都被加载，因此不使用isLoaded属性。
解决方案
index ng-class = {'active'：hTab.active} > < a ng-click = setActive（hTab，true） > {{hTab.SSHVSettingsTabGroupName}} < / a > < / li >
< / ul >
< div class = tab-content >
< div class = tab-pane ng-class = {'active'：hTab.active} ng-repeat = hTab in horzTabs track by
index >
< div < span class =code-attribute> ng-if = hTab.SSHVSettingsTabInfo class = tabbable tabs-left >
< ul 类 = nav nav-tabs >
< li ng-repeat = vTab in hTab.SSHVSettingsTabInfo track by
index ng-class = {'active'：vTab.active} >
< ; a ng-click = setActive（vTab，false）; > ; {{vTab.TabCaption}} < / a >
</ li >
< / ul >
< div class = tab-content col-pad-10 borderAll tabContentCustom >
< div class = tab-pane ng-repeat = < span class =code-keyword> vTab in hTab.SSHVSettingsTabInfo track by
Hi,
I have created a tab structure as Horizontal tabs group. Each horizontal tab will have number of vertical tabs in it.
In each vertical tab, I am binding a user control using an iframe.
When a page loads, all user controls in all tabs load at the same time which affects he performance of the page.
This is my HTML
<div ng-app="myApp"> <div ng-controller="MainCtrl"> <div class="tabbable padTop10"> <ul class="nav nav-tabs"> <li ng-repeat="hTab in horzTabs track by $index" ng-class="{'active':hTab.active}"><a ng-click="setActive(hTab, true)">{{hTab.SSHVSettingsTabGroupName}}</a></li> </ul> <div class="tab-content"> <div class="tab-pane" ng-class="{'active': hTab.active}" ng-repeat="hTab in horzTabs track by $index"> <div ng-if="hTab.SSHVSettingsTabInfo" class="tabbable tabs-left"> <ul class="nav nav-tabs"> <li ng-repeat="vTab in hTab.SSHVSettingsTabInfo track by $index" ng-class="{'active':vTab.active }"> <a ng-click="setActive(vTab, false);">{{vTab.TabCaption}}</a> </li> </ul> <div class="tab-content col-pad-10 borderAll tabContentCustom"> <div class="tab-pane" ng-repeat="vTab in hTab.SSHVSettingsTabInfo track by $index" ng-class="{'active': vTab.active}"> <ext-iframe ng-if="vTab.URL" src="{{vTab.URL}}" name="{{vTab.TabName}}" ></ext-iframe> </div> <div ng-if="hTab.URL"> <div class="tab-content"> <div class="tab-pane" ng-class="{'active': hTab.active}"> <ext-iframe ng-if="hTab.URL" src="{{hTab.URL}}" name="{{hTab.TabName}}" ></ext-iframe> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
This is my js:
var app = angular.module('myApp', []); app.controller('MainCtrl', function ($scope, $sce) { $scope.iMainTabIndex = 0; $scope.horzTabs = tabCollection; $scope.currentHTab = $scope.horzTabs[$scope.iMainTabIndex]; $scope.currentHTab.active = true; $scope.currentVTab = $scope.currentHTab.SSHVSettingsTabInfo[0]; $scope.currentVTab.active = true; $scope.iTab1Index = 0; $scope.setActive = function (tab, horz) { var tabdir; if (horz) tabdir = 'H'; else tabdir = 'V' tab.active = true; if ($scope['current' + tabdir + 'Tab']) { $scope['current' + tabdir + 'Tab'].active = false; } $scope['current' + tabdir + 'Tab'] = tab; } }); app.directive('extIframe', [ function () { return { restrict: 'E', scope: { "src": "@", "name": "@" }, template: '<iframe seamless="seamless" class="dynamicHeight" width="100%" frameborder="0" src="{{\'../SettingControls/ControlViewer.aspx?usName=\' + name + \'&src=\' + src}}"></iframe>' }; } ]) angular.module('myApp').config(function ($sceDelegateProvider) { $sceDelegateProvider.resourceUrlWhitelist(['**']); });
ControlViewer.aspx page will hold the user controls.
Is it possible to load the user control in iframe only when user clicks on the tab?
Is there any better way to load user control on each tab?
What I have tried:
I am not very much familiar with angularjs. I tried creating isLoaded property for each tab and set it to true only when user clicks on tab.
But all user controls gets loaded when a page loads, so no use of isLoaded property.解决方案index" ng-class="{'active':hTab.active}"><a ng-click="setActive(hTab, true)">{{hTab.SSHVSettingsTabGroupName}}</a></li> </ul> <div class="tab-content"> <div class="tab-pane" ng-class="{'active': hTab.active}" ng-repeat="hTab in horzTabs track by
index"> <div ng-if="hTab.SSHVSettingsTabInfo" class="tabbable tabs-left"> <ul class="nav nav-tabs"> <li ng-repeat="vTab in hTab.SSHVSettingsTabInfo track by
index" ng-class="{'active':vTab.active }"> <a ng-click="setActive(vTab, false);">{{vTab.TabCaption}}</a> </li> </ul> <div class="tab-content col-pad-10 borderAll tabContentCustom"> <div class="tab-pane" ng-repeat="vTab in hTab.SSHVSettingsTabInfo track by
这篇关于在angularjs中按需加载选项卡的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
