I have used bootstrap directive for angularjs for tab(http://angular-ui.github.io/bootstrap/),
and i found that it only support specific parameters
https://github.com/angular-ui/bootstrap/tree/master/src/tabs/docs
i want to know is there any way to set image instead of heading for bootstrap angularjs directive ?
Check it out here:
<tabset>
<tab>
<tab-heading>
<i class="glyphicon glyphicon-bell"></i> Alert!
</tab-heading>
Other tab content
</tab>
</tabset>
Practically you can put any content inside the <tab-heading>.
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.
Facing a weird issue, where a simple text field value is not getting printed when using tabset. Wrote a sample to demo the same. Please check it below link
sample link
<tabset>
<tab heading="Static title">Testing input
<input ng-model="nameStr" value="">
<button class="btn btn-default btn-lg " type="button" ng-click="callMe()" >Test callme</button>
</tab>
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
{{tab.content}}
</tab>
<tab select="alertMe()">
<tab-heading>
<i class="glyphicon glyphicon-bell"></i> Alert!
</tab-heading>
I've got an HTML heading, and a select callback. Pretty cool!
</tab>
</tabset>
Do suggest, what would have been missed out.
Thanks in advance.
There is some questions about angular-ui way of encapsulate controllers inside it's directives (the idea is to have different controllers for different tasks). The problem, to access your "original" controller (and not the ones in the ui-bootstrap directive) you have to use the $parent in your view. Because the current $scope inside tabset is pointing to another controller.
So, it will become
<input ng-model="$parent.nameStr" value="">
I couldn't find the right explanation in the angular-ui repo, but this seems to get some ideas.
https://github.com/angular-ui/bootstrap/issues/2971
Older Answer
You can replace the $scope.nameStr inside the $scope.callMe for this.nameStr.
http://plnkr.co/edit/cUUQ9FQ0oEOmIltQTS2f?p=preview
My solution:
$scope.name = {};
$scope.callMe = function(){
alert('title ->'+$scope.name.str);
}
In html:
<input ng-model="name.str" value="">
Angular works much better this way. Using dot properties.
I am wondering whether it is possible to write html inside an angularjs bootstrap tabset tab heading. I am trying to add a svg inside the title. I have created a quick snippet in plunker to try and demonstrate the issue I am having.
<tabset>
<tab heading="<span>hello</span><em>1</em>">One</tab>
<tab heading="Two">Two</tab>
<tab heading="Three">Three</tab>
</tabset>
http://plnkr.co/edit/qFsFGDNUIJj9nIF51ApU
any ideas?
thanks
Angular Bootstrap v0.14+
Angular Bootstrap v0.14 introduced new prefixes for most previously provided controls. The original answer below still applies, but you must use the new tag names uib-tabset, uib-tab, and uib-tab-heading.
<uib-tabset>
<uib-tab>
<uib-tab-heading>
<span>hello</span><em>1</em>
</uib-tab-heading>
One
</uib-tab>
<uib-tab heading="Two">Two</uib-tab>
<uib-tab heading="Three">Three</uib-tab>
</uib-tabset>
Angular Bootstrap < v0.14
You should be using the tab-heading element within the tab element if you want HTML within the heading (as shown in the example in the docs):
<tabset>
<tab>
<tab-heading>
<span>hello</span><em>1</em>
</tab-heading>
One
</tab>
<tab heading="Two">Two</tab>
<tab heading="Three">Three</tab>
</tabset>
Updated plunker here.
Since 2016
The accepted answer is ok for the ui-bootstrap prior version 0.14.0, since version 0.14.0 (2015.10.09) tabs use uib- prefix.
See changelog
So you have to replace all tags with uib- prefix
<uib-tabset>
<uib-tab>
<uib-tab-heading>
<span>hello</span><em>1</em>
</uib-tab-heading>
One
</uib-tab>
<uib-tab heading="Two">Two</uib-tab>
<uib-tab heading="Three">Three</uib-tab>
</uib-tabset>
You can give your TAB tag an id and then use jQuery to augment the html.
...tab id="myid"....
and then
jQuery("#myid").html("New Html")
[edit] Taylor Buchanan's answer is the correct answer!
Looking at the template used by the tabs directive, the headings content will be escaped: https://github.com/angular-ui/bootstrap/blob/192768e109b5c4a50c7dcd320e09d05fedd4298a/template/tabs/tab.html#L2
So it is not possible to use html in your headings.
You can create a work-around by re-defining the tab template like so:
angular.module("template/tabs/tab.html").run(["$templateCache", function($templateCache) {
$templateCache.put("template/tabs/tab.html",
"<li ng-class=\"{active: active, disabled: disabled}\">\n" +
" <a ng-click=\"select()\" tab-heading-transclude ng-bind-html=\"heading\"></a>\n" +
"</li>\n" +
"");
}]);
You will also need to nclude angular-sanitize.js to safely bind html contents.
Working Demo here: http://plnkr.co/edit/ep5f1GY12vSixT4xtxFy?p=preview
<li heading="Status" class="ng-isolate-scope var" ng-model="(var = 'active: active')" >
Status1
</li>
<li heading="Status" class="ng-isolate-scope var" ng-model="var = 'active: active'">
Status
</li>
</tabset>
I am using AngularUI tabs as seen in the following sample code below and in this plunker.
http://plnkr.co/edit/YlbrObH4sBlyUFZO2tZh?p=preview
<tabset class="tabbable tabbable-custom tabbable-full-width">
<tab class="active" heading="Latest Customers" href="javascript:;">
<div class="tab-pane active" id="Div1">
Pane 1
</div>
</tab>
<tab heading="Feeds" href="javascript:;">
<div class="tab-pane" id="Div2" href="javascript:;">
<div class="tab-pane active" id="Div3">
Pane 2
</div>
</div>
</tab>
</tabset>
As you can see in the plunker, when the mouse hovers over the "tab", the cursor does not change to your typical pointing finger. The anchor tag that angularui is rendering does not have a href value on it, therefore, it is considered invalid html. if i manually add href="javascript:;" , the cursor works like i want it.
My question is, how can i tell the directive to add a href to the anchor tag? any advice?
Thanks,
Dan
You could add a style that targets the tabs:
.nav-tabs > li > a {
cursor: pointer;
}
just write:
<tabset
class="tabbable tabbable-custom tabbable-full-width"
style="cursor: pointer;"
>
....
Mmh this is weird, I too am using angular-ui tabs in my project. I copied and pasted the exact code you provided and it works just fine.
(see bottom of http://wiredbeast.com/coolframework/docs.html#/activity)
I might remove it later so look quick.
So my guess is that it's something wrong with your bootstrap css. I'm using ui-bootstrap-tpls-0.6.0.min.js, bootstrap.js/css v3.0.0, and https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js for angular