[英]angular ui bootstrap tabs component: how to get the content of a tab when the tab is active not clicked
I am using the ui bootstrap 'tabs' component in my angularjs project. 我在我的angularjs项目中使用ui bootstrap'tabs'组件。 It is defined in a file called tab.html .
它在名为tab.html的文件中定义。 the definition code is as follows :
定义代码如下:
<uib-tabset class="product-tab-bar">
<uib-tab ng-repeat="tab in tabs" active="tab.active" ui-sref="{{tab.action}}" disable="tab.disabled" class="product-tab">
<uib-tab-heading>
<span class="{{tab.icon}}"></span> {{tab.title}}
</uib-tab-heading>
<div ui-view></div>
</uib-tab>
</uib-tabset>
The tabs are defined in a controller, which are: 这些选项卡在控制器中定义,它们是:
.controller('myController', function () {
$scope.tabs = [
{title: "tab1", action:".tab1" , icon: "icon-tab1", active: false},
{title: "tab2", action:".tab2" , icon: "icon-tab2", active: true},
{title: "tab3", action:".tab3" , icon: "icon-tab3", active: false}
]
});
the states definition are: 状态定义为:
.state('tab', {
url: '/tab',
templateUrl: 'tab.html'
})
.state('tab.tab1', {
url: '/tab1',
templateUrl: 'tab1.html',
})
.state('tab.tab2', {
url: '/tab2',
templateUrl: 'tab2.html',
})
.state('tab.tab3', {
url: '/tab3',
templateUrl: 'tab3.html',
})
When you click the tab, the state will be changed. 单击选项卡时,状态将更改。 Now my question is, when I first load the tab.html , the tab 'tab2' is activated, but the content of tab2 is not loaded
现在我的问题是,当我第一次加载tab.html时 ,选项卡'tab2'被激活,但是tab2的内容未加载
you can see as below: 您可以看到如下:
fist load tab2 content 拳头加载tab2内容
I need to click on 'tab2', and the state will be changed and the content will be loaded 我需要单击“ tab2”,状态将被更改并且内容将被加载
you can see as below: 您可以看到如下:
after click tab2 content 点击tab2后的内容
So is there any method when I first load the tab.html , the content of 'tab2' can be loaded or how to active the state of 'tab2' ? 那么,当我第一次加载tab.html时 ,有什么方法可以加载'tab2'的内容,或者如何激活'tab2'状态?
That's because you change the state only on click (ui-sref="...") 那是因为您只能在单击时更改状态(ui-sref =“ ...”)
So in the first time the tab is active but the ui-view don't change. 因此,在第一次选项卡处于活动状态,但用户界面视图不变。
One quick solution for example is to $state.go to the active tab on first load. 例如,一种快速解决方案是在第一次加载时将$ state.go转到活动选项卡。
Use $state.go('the-state-name-in-quotes') method to trigger appropriate state and load content. 使用$ state.go('-the-state-name-in-quotes')方法触发适当的状态并加载内容。 Add this method in your controller.
在您的控制器中添加此方法。
Below documentation have more details 以下文档具有更多详细信息
https://github.com/angular-ui/ui-router/wiki/Quick-Reference#stategoto--toparams--options https://github.com/angular-ui/ui-router/wiki/Quick-Reference#stategoto--toparams--options
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.