I was surprised about the icon wasn't shown when I'm put the attribute translate in the button with glyphicons (no glyphicons is fine!!).
My index.html
<button id="CartButton" class="btn btn-success" data-toggle="modal" data-target="#CartModal" translate="HEAD.CART">
<span class="glyphicon glyphicon-shopping-cart"></span> ({{ROLineList.length}}) Cart
</button>
My app.js
app.config(function ($translateProvider) {
$translateProvider.translations('th', {
HEAD: {
CART: 'ตะกร้า'
}
});
$translateProvider.translations('en', {
HEAD: {
CART: 'Cart'
}
});
$translateProvider.translations('cn', {
HEAD: {
CART: '大車'
}
});
});
It's OK for the menu, but the button not displaying bootstrap-glyphicons but also show wrong position of label as in the following image.
Right now, I have not enough reputations to post image, I draft you a layout the menu and the cart button like this
menu --> Product | Webboard | Payment | About us [ (Cart) Cart ] <---- button (EN)
menu --> สินค้า | เว็บบอร์ด |การชำระเงิน| เกี่ยวกับเรา [ (ตะกร้า) Cart ] <---- button (TH)
I hope it can display bootstrap-glyphicons and the label is shown in appropriate position something like
[ icon (0) ตะกร้า ] or [ icon (0) Cart ]
The problem is that the directive translate="HEAD.CART" from angular-translate replaces the innerHTML of the element that is being applied to, thus you lose the <span class="glyphicon"></span> inside the button.
A workaround is to use another span as translate directive on a inner element, inside of the wrapping element. For instance:
<button id="CartButton" class="btn btn-success" data-toggle="modal" data-target="#CartModal">
<span class="glyphicon glyphicon-shopping-cart"></span>
({{ROLineList.length}}) <span translate="HEAD.CART"></span>
</button>
This approach has a better performance than using the filter, because it doesn't set any additional watchers (see the docs).
You might also consider using variable replacement when you have inline values.
Update!! I've changed from using attribute
translate="HEAD.CART"
in to use {{'HEAD.CART' | translate}} instead.
my old code snippet:
<button id="CartButton" class="btn btn-success" data-toggle="modal" data-target="#CartModal" translate="HEAD.CART">
<span class="glyphicon glyphicon-shopping-cart"></span> ({{ROLineList.length}}) Cart
</button>
My new code snippet:
<button id="CartButton" class="btn btn-success" data-toggle="modal" data-target="#CartModal" >
<span class="glyphicon glyphicon-shopping-cart"></span> ({{ROLineList.length}}) {{'HEAD.CART'| translate}}
</button>
Finally, It works great right now.
Thanks.
Related
before posting here i searched and searched and i found several solutions for applying tooltips to disabled buttons, anyway none of these was using uib-tooltip from angular ui bootstrap.
Here is the code of my button:
<button class="btn btn-default"
uib-tooltip="My tooltip text"
tooltip-append-to-body="true"
ng-disabled="!isAllSelected"
ng-click="doThat()">Click Here
</button>
Do you know how to make tooltip displayable even when the button is disabled?
Similar to janosch's solution - wrap your button in a div which has the tooltip attribute.
<div uib-tooltip="{{ isDisabled ? 'Button is disabled' : '' }}">
<button disabled="isDisabled">Button</button>
</div>
The tooltip will only be visible when the variable isDisabled is true, which also sets the disabled status of the button.
This solution will also work if you are using the title attribute instead of uib-tooltip
I don't think it's possible on a button, but it works if you use link disguised as a button, instead of a button:
<a class="btn btn-default"
uib-tooltip="My tooltip text"
tooltip-append-to-body="true"
ng-disabled="!isAllSelected"
ng-click="doThat()">Click Here
</a>
Simplest, least intrusive solution to this is:
<a class="btn btn-default"
uib-tooltip="My tooltip text"
tooltip-append-to-body="true"
ng-disabled="!isAllSelected"
ng-click="isAllSelected ? doThat() : null">Click Here
</a>
(notice conditional ng-click, without which clicks will still go through even when anchor is "disabled" - i.e. anchors don't support disabled attribute)
I know this question is several years old however someone might find useful this workaround.
What I did was to wrap the button content in a <span> tag and apply the uib-tooltip to it:
<button type="button" class="btn btn-primary" ng-click="foo()" ng-disabled="true">
<span uib-tooltip="Tooltip text" tooltip-append-to-body="true"> Button text<span>
</button>
If you also need the tooltip to be shown when the user hovers over the whole button area, you can also remove the button padding and add it to the <span> instead.
<button type="button" class="btn btn-primary" ng-click="foo()" ng-disabled="true" style="padding: 0px !important;">
<span uib-tooltip="Tooltip text" tooltip-append-to-body="true" style="display:inline-block; padding: 5px 10px;"> Button text<span>
</button>
Irrespective of button being enabled or disabled, I am getting the uib tool tip. The below code is working fine for me.
<button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()" ng-disabled = "true" uib-tooltip="After today restriction" >Min date</button>
Please see this plunker
Added screenshot of tooltip
Additional notes: You can also configure the position of tooltip. All you need to do is to take the help of $uibTooltipProvider. We can then use config section to achieve the result. Below code is included in the plunker.
angular.module('ui.bootstrap.demo')
.config(['$uibTooltipProvider', function ($uibTooltipProvider) {
$uibTooltipProvider.options({
'placement':'bottom'
});
}])
In a large form, I'm using popovers to display error messages from the validation (I know, not best practice).
Now, I also want to add tooltips to display detailed explanation of the input.
However, using both, the tooltip and the popover directive (and their associated -trigger and -placement directives), the behavior is odd/buggy: Both, tooltip and popover are placed based on the popover-placement directive (ignoring the tooltip-placement) - and display the text provided for the popover.
<button class="btn btn-default"
popover="Popover" popover-trigger="mouseenter" popover-placement="right"
tooltip="Tooltip" tooltip-trigger="mouseenter" tooltip-placement="top" >
Label</button>
See this plunkr.
Any idea how to make this work?
They actually infact use the same placement function.
From the docs on popover:
The popover directive also supports various default configurations through the $tooltipProvider. See the tooltip section for more information.
Meaning if you had the following code:
app.config(['$tooltipProvider', function($tooltipProvider){
$tooltipProvider.options({
'placement': 'right'
});
}]);
It would change the default for both tooltips and popovers.
Best I can think of is it have some sort of wrapper around the element so you can do each in turn.
<button class="btn btn-default sampleBtn"
popover="Popover" popover-trigger="mouseenter" popover-placement="right">
<span tooltip="Tooltip" tooltip-trigger="mouseenter" tooltip-placement="top">
Tooltip + Popover
</span>
</button>
Demo in Plunker
A very Simple Way..Just Make a parent Span for the button and attach those properties with that Span. I have Some Code for that too
<span title="Popover title" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Some content in Popover on bottom">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
</span>
Here is the JS Fiddle for that too
http://jsfiddle.net/h75k1fzj/
I want to execute a function when the value of the select element changes (the select element in angular-strap is html tag)
My HTML:
<button type="button" class="btn btn-default" ng-model="selectedCriteria" data-html="1" ng-options="choice.value as choice.label for choice in selectChoices" bs-select>
Action <span class="caret"></span>
</button>
My JS:
$scope.selectedCriteria = "Location";
$scope.selectChoices = [{'value':'Location','label':'<i class=\'fa fa-map-marker\'></i> Location'},
{'value':'Age','label':'<i class=\'fa fa-male\'></i> Age'}];
I tried putting an ng-click directive with a function in the controller but it captures the value of the current selected value on click not when the element changes
Thanks
There are a couple of options one is using ngChange Reference
The other is using $watch. See the $watch section of the scopeapi reference
An example using watch (this would be in your controller)
$scope.$watch('selectedCriteria', function() {
$scope.SomeFunction();
});
An example using ngChange
<button type="button" class="btn btn-default"
ng-change="SomeFunction()"
ng-model="selectedCriteria" data-html="1"
ng-options="choice.value as choice.label for choice in selectChoices" bs-select>
Action <span class="caret"></span>
</button>
I've got a button linked to a UI Bootstrap
Collapse directive if I click on it
the script show a form to reply a comment.
when the form is showed I want to hide the button
but I've got a strange behavior
this doesn't work:
<a data-ng-click="isCollapsed = !isCollapsed" data-ng-if="isCollapsed" class="btn btn-info btn-xs" title="reply comment">
<span class="glyphicon glyphicon-share-alt"></span> Reply
</a>
this work:
<a data-ng-click="isCollapsed = !isCollapsed" data-ng-show="isCollapsed" class="btn btn-info btn-xs" title="reply comment">
<span class="glyphicon glyphicon-share-alt"></span> Reply
</a>
and I don't really know why !
Can you enlighten me, please ?
This is expected because ng-if creates new child scope and isCollapsed property is created in it on the first click. But ng-if itself is looking at the parent scope.
Try using toggle() function declared on controller level for ng-click
$scope.toggle = function () {
$scope.isCollapsed = !$scope.isCollapsed;
};
Consider using the rule:
Treat $scope as read only in templates.
I'm trying to find an element which is a button and click on it in protractor but I'm getting an error element is not visible.
<li data-ng-repeat="dog in dogs">
<button type="button" name="dog1" class="dog1">></button>
<button type="button" name="dog2" class="dog2">></button>
<button type="button" name="dog3" class="dog3">></button>
<button type="button" name="dog4" class="dog4">></button>
</li>
When I use ptor.findElement(protractor.By.className('dog1')).click();
I'm getting an error element is not visible.
I tried
var dog;
dog = ptor.findElements(protractor.By.repeater('dog in dogs')).then(function(rows) {
rows.forEach(function (row) {
row.getText().then(function (rows) {
console.log(rows);
});
});
});
and I print the rows but I still cannot click on the nested element.
I use protractor Version 0.12.1
Any idea how to click on that nested element? Thank you
Just use css grammar for this (as in Richards comment):
element(by.css('li:nth-child(3)>.my-class'));