I'm trying to get nested tabsets. But there's a problem - the nested tabset doesn't work because of TypeError: Cannot read property '$parent' of undefined
You can see it here:
http://plnkr.co/edit/xU9RibIL9k1D3m4GwB5z?p=preview
The html part (most important, controller is empty)
<tabset>
<tab heading="normal">
<div>Content 1</div>
</tab>
<tab heading="nested">
<div>
<tabset>
<tab heading="Nested One">
<div>Nested Content 1</div>
</tab>
<tab heading="Nested Two">
<div>Nested Content 2</div>
</tab>
</tabset>
</div>
</tab>
</tabset>
(And no, I can't use ng-view and routing - because I don't want to lost contents of tabs when switched back - routing reloads tab content)
Related
I'm getting this error:
Error: [$compile:nonassign] Expression '$state.current.name==='admin.adminDetails'' used with directive 'tab' is non-assignable!
Trying to activate tabs based off of url:
<tabset direction="right" class="tabbable">
<tab heading="Details" ui-sref="admin.details" active="$state.current.name === 'admin.details'">
<div ui-view="adminDetails"></div>
</tab>
<tab heading="Resources" ui-sref="admin.resources" active="$state.current.name==='admin.resources'">
<div ui-view="adminResources"></div>
</tab>
</tabset>
I'm doing it this way so when the url is /admin/resources then the tab will open on the resources tab and same with the details.
Any insight into this error?
You could try using ui-sref-active="active" instead og active.
This applies the class "active" to the element.
Should be used alongside with ui-sref. Docs
Is it possible to set a $scope value on a tab when its active?
Example: 3 tabs with ng-model="tabID" on each. Then {{tabID}} would be either 1,2,3,4 depending on what tab is active.
Put ng-click inside tab:
<tabset>
<tab ng-model="tabID" ng-click="activate(1)">
<tab-heading><i class="fa fa-bell"></i> First tab</tab-heading>
<tab-content>
fixed tab content
</tab-content>
</tab>
<tab ng-model="tabID" ng-click="activate(2)">
<tab-heading><i class="fa fa-bell"></i> Second tab</tab-heading>
<tab-content>
Content
</tab-content>
</tab>
<tab ng-model="tabID" ng-click="activate(3)">
<tab-heading><i class="fa fa-bell"></i> Third Tab</tab-heading>
<tab-content>
content
</tab-content>
</tab>
</tabset>
In your javascript (controller):
$scope.activate=function(i)
{
$scope.tabID=i;
}
You can have one variable which stores which tab is selected and onclick change the tab value
$scope.changeTab=function(index)
{
$scope.selectedtabID=index;
}
I'm using Angular-Ui Bootstrap Tabset for AngularJS. I have 8 different tabs and all of them run a function when clicked. The activated tab is defined on the controller based on the object properties. The code is like this:
<tabset ng-if="paginaPronta">
<tab heading="Histórico" active="activeTabs.historico" disabled="beforeNew" select="tabHistorico('html')">
<div ng-include="includes.historico" class="row padding0"></div>
</tab>
<tab heading="Pedido" active="activeTabs.pedido" select="tabPedido('html')">
<div ng-include="includes.pedido" class="row padding0"></div>
</tab>
<tab heading="Documentos" active="activeTabs.documentos" disabled="beforeNew" select="tabDocumentos('html')">
<div ng-include="includes.documentos" class="row padding0"></div>
</tab>
<tab heading="Posse" active="activeTabs.posse" disabled="beforeNew" select="tabPosse('html')">
<div ng-include="includes.posse"></div>
</tab>
<tab heading="Despesas" active="activeTabs.despesas" disabled="beforeNew" select="tabDespesas('html')">
<div ng-include="includes.despesas" class="row padding0"></div>
</tab>
<tab heading="Faturação" active="activeTabs.faturacao" select="tabFaturacao('html')">
<div ng-include="includes.faturacao" class="row padding0"></div>
</tab>
<tab heading="Anexos" select="tabAnexos('html')">
<div ng-include="includes.anexos" class="row padding0"></div>
</tab>
<tab heading="Relatório" active="activeTabs.relatorio" disabled="beforeNew" select="tabRelatorio('html')">
<div ng-include="includes.relatorio"></div>
</tab>
</tabset>
Everything works fine at beginning but, when I change the location to navigate to another page, all 8 tab functions are called (tabHistorico(), tabPedido(), tabPosse()...)
I'm not calling the functions in any other place, I put the 'html' in every function and them made a console.log('tabHistorico: ' + phrase) on the controller and it gets printted tabHistorico: html. So, I know that all tabs are activated, I can't figure out why...
<tabset>
<tab heading="{{nav.label}}" ng-repeat="nav in vm.data" href="{{nav.url}}">
<tabset class="subnav">
<tab ui-href="{{item.state}}" href="{{item.state}}" heading="{{item.label}}" ng-repeat="item in nav.items">
</tab>
</tabset>
</tab>
</tabset>
I want to add href, but you can not click!
I used angular-ui-bootstrap and angular-route!
What can I do?
You are making a mistake it isn't 'ui-href' but "ui-sref" and give a state name to it.
sref is for "state reference".
Angular UI, has support only for basic tabs.
I wanted to create a directive that would support nested tabs & advanced headings (that can include html).
I think, that the best syntax would be
<tabs>
<tab>
<title><i class="myIcon"></i> Title 1</title>
<p>Content 1</p>
</tab>
<tab>
<title class="pull-right">Title 2 (Nested)</title>
<tab>
<title>Title 2.1</title>
<p>Content 2.1</p>
</tab>
<p>Content 2</p>
</tab>
</tabs>
My problem with this approach, is that I would need 2 ng-transclude - one for panes and one for titles.
As it would be very easy to do the first ng-transclude (just like in the tutorial):
<div>
<ul>
<li ng-repeat="pane in panes" transclude-title></li>
</ul>
<div class="tab-content" ng-transclude="">
</div>
</div>
I don't have any idea how can I transclude titles here?
How can I preserve nested structure of tabs ?
Maybe there is a better solution to this problem ?
This is a multiple transclude example. I hope it points you into the right direction.
http://plnkr.co/edit/wpgvgr5h6nAQDOZYEHNI?p=preview