I have a simple layout using Angular UI tabs as follows:
<div id="mainContainer" class="mainContainer" data-ng-controller="authorization">
<tabset ng-if="authorized">
<tab heading="Resources" >
Authorized
</tab>
</tabset>
<div ng-if="!authorized">
Not authorized
</div>
</div>
Whenever authorized is false "Not authorized" is displayed is expected, but whenever authorized is true and tabs are supposed to be display I get this ugly thing:
TypeError: Cannot read property '$parent' of undefined
at link (http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.7.0.js:2760:51)
at Q (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js:49:451)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js:56:142
at f (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js:43:24)
at Q (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js:49:392)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js:56:142
at f (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js:43:3)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js:42:180
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js:43:422
at y (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js:47:204) <ul class="nav {{type && 'nav-' + type}}" ng-class="{'nav-stacked': vertical}" tabset-titles="!tabsAbove">
I also get the same thing if I use ng-switch.
Here is the Angular versions I am using
//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js
//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.7.0.js
Seeing how it doesn't look like it's coming from any of my angular code I am not even sure where to start looking for a solution.
Thank you!
One solution is to ensure that the directives ng-if and tabset do not collide:
<div ng-if="authorized">
<tabset>
<tab heading="Resources" >
Authorized
</tab>
</tabset>
</div>
Your problem could be related to this issue.
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
In my Angular 1.3 project I have the following:
<tabset>
<tab ng-controller="FirstTabCtrl">
{{content}}
</tab>
<tab ng-controller=SecondTabCtrl">
{{content}}
</tab>
</tabset>
In Angular 1.4.4 I get the following error message:
Multiple directives [ngController, tab] asking for new/isolated scope
I have tried wrapping the tabs in div's but that destroys the layout.
How can rewrite the code to work with 1.4.4?
Here is a plunker describing the problem: http://plnkr.co/edit/KScdI2jAZ4BAvDL4kCfk?p=preview
If you definitely don't want to use routes and states to handle the tabs, you could restructure the content inside each tab directive: add the ng-controller to a div inside the <tab> element, like this:
<tab heading="tab 1">
<div ng-controller="FirstCtrl">
{{content}}
</div>
</tab>
Here's a plunkr to show it.
This doesn't destroy the tab layout, but if it does in some way, you can always handle that with CSS.
Guys I am beginner in AngularJs and javascript.
In my project, I am using this plugin https://github.com/mikejacobson/angular-bootstrap-scrolling-tabs
but I am facing error and I am not able to find the root cause even after spending too much time.
Here's my HTML code -
<div class="scrolling-tabs-container" ng-controller="MainController as main">
<div scrolling-tabs-wrapper>
<tabset ng-show="main.tabs.length" style="z-index: 50px;">
<tab ng-repeat="t in main.tabs" active="t.active" class="tabclass">
<tab-heading style="padding: 5px">{{t.title}}
<a ng-click="removeTab($index)" href=''>
<i class="selected-tab"></i>
<i class="icon-remove"></i>
</a>
</tab-heading>
<div ng-bind-html='to_trusted(t.content)'></div>
</tab>
</tabset>
</div>
</div>
I have included the required javascript files and css files but I am facing this error when I am trying to click left scroll arrow-
TypeError: stc.$leftScrollArrow.add is not a function
at ElementsHandler.p.setElementReferences (scrolling-tabs.js:231)
at ElementsHandler.p.initElements (scrolling-tabs.js:170)
at __initTabsAfterTimeout (scrolling-tabs.js:525)
at angular-1.3.15.min.js:16298
at completeOutstandingRequest (angular-1.3.15.min.js:4924)
at angular-1.3.15.min.js:5312(anonymous function) # angular-1.3.15.min.js:11654
Has someone used this plugin? Can someone help me understanding this issue? Please help.
Amarpreet, make sure jQuery is loaded before angular, as the Issue on GitHub
says
When using a UI Boostrap tabset along with nested sticky states created with ui-router and ui-router-extras, I have an issue where navigating to a tab's state via URL will select the first tab along with the correct tab. It should only activate the tab whose state matches the URL route.
Here's what the tabset looks like:
<div style="position:relative">
<tabset>
<tab heading="Dashboard" ui-sref="LMS.Dashboard" ui-sref-active="active"></tab>
<tab heading="Modules" ui-sref="LMS.Modules" ui-sref-active="active"></tab>
<tab heading="Messages" ui-sref="LMS.Messages" ui-sref-active="active"></tab>
<tab heading="Settings" ui-sref="LMS.Settings" ui-sref-active="active"></tab>
</tabset>
<div ui-view="Dashboard" class="tab-content" ng-show="$state.includes('LMS.Dashboard')">
<h2>Dashboard</h2>
{{test}}
</div>
<div ui-view="Modules" class="tab-content" ng-show="$state.includes('LMS.Modules')">
<h2>Modules</h2>
</div>
<div ui-view="Messages" class="tab-content" ng-show="$state.includes('LMS.Messages')">
<h2>Messages</h2>
</div>
<div ui-view="Settings" class="tab-content" ng-show="$state.includes('LMS.Settings')">
<h2>Settings</h2>
</div>
</div>
I have a plunker here:
http://plnkr.co/edit/sQB58YKntDwNIUpAdLmT?p=preview
To see the issue, select a tab other than 'Dashboard', then reload the "live view" frame.
Another way is to open it in a window, switch the tab, then reload.
I have the same issue. Add active="false" to disable default behavior and use ui-sref-active to add active class.
<tab ui-sref-active="active" active="false">
Edit
While this method seems to works, it produces error because false is not assignable.
Edit 2
Combining ng-init with a local scope variable seems to do the trick.
<tab ui-sref-active="active" active="isActive" ng-init="isActive=false">
In your case, it might be simpler to just add an active variable for each tab. See this plunker:
http://plnkr.co/edit/73lm068buZf851h47FVQ?p=preview
I had exactly the same thing. After searching for while, I decided the "value" ui-bootstrap offers around tabs is not worth the effort. My simple manual implementation:
<ul class="nav nav-tabs">
<li ng-class="{active:$state.current.name == 'properties.edit.basic'}"><a ui-sref="properties.edit.basic">Basic</a></li>
<li ng-class="{active:$state.current.name == 'properties.edit.marketing'}"><a ui-sref="properties.edit.marketing">Marketing</a></li>
<li ng-class="{active:$state.current.name == 'properties.edit.rooms'}"><a ui-sref="properties.edit.rooms">Rooms</a></li>
<li ng-class="{active:$state.current.name == 'properties.edit.images'}"><a ui-sref="properties.edit.images">Images</a></li>
<li ng-class="{active:$state.current.name == 'properties.edit.rates'}"><a ui-sref="properties.edit.rates">Rates</a></li>
<li ng-class="{active:$state.current.name == 'properties.edit.availability'}"><a ui-sref="properties.edit.availability">Availability</a></li>
</ul>
<ui-view></ui-view>
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