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
Related
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.
<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".
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>
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.
I'm using the tabs in angular-ui using this controller:
$scope.panes = [
{ title:"Home", content:"home" , active: true},
{ title:"Settings", content:"settings"},
{ title:"View", content:"view"}
];
and this in the html file:
<tabs>
<pane
active="pane.active"
heading="{{pane.title}}"
ng-repeat="pane in panes"
>
{{pane.content}}
</pane>
</tabs>
but i want to set the content as a template how can I do that, I tried setting the ng-include code in this plunker, but didn't work.
Thanks in advance.
update:
if you find this solution and you'r not using angular-bootstrap v0.12 you need to update the code to the new syntax of v0.13 like this:
<tabset>
<tab
active="pane.active"
heading="{{pane.title}}"
ng-repeat="pane in panes"
>
<div ng-include="pane.content"></div>
</tab>
</tabset>
I already updated the plunker to have the syntax of the angular-bootstrap v0.13.
Just add the ng-include as a child of the pane
<tabs>
<pane active="pane.active"
heading="{{pane.title}}"
ng-repeat="pane in panes">
<div ng-include="pane.content"></div>
</pane>
</tabs>
The reason this works is that the scope variable pane is not yet available when you use the ng-include in the same element as the ng-repeat that creates the pane variable.
This is because the priority value of the ng-include is 0(the default) while the priority of the ng-repeat is 1000 and so the order of execution is:
ng-include
ng-repeat
See the directive docs