I want not to show ui.bootstrap popover by using popover-is-open directive. For example, in template:
<button class="fa fa-link add-link"
uib-popover="popover"
popover-is-open="isOpen"> Show popover </i>
And in controller:
angular.module('demoModule').controller('PopoverDemoCtrl', function ($scope) {
$scope.isOpen = false;
});
See plunkr
I am expecting that popover should never be opened, but it opens on click on it. It seems that popover-is-open affects only first angular compiling. Any ideas?
upd: Actually, i want not to show popover only in some cases, in other cases it should be shown. For example, i have download-dialog popover and i want to show it only if size of file is greater than some limit.
The popover-is-open is only for the initial behavior, i.e. if it evaulates to true, then the popover opens instantly even without a click. If you change the value of isOpen to true in your plunkr, you see that (my example plunkr).
What you want is the popover-enable attribute:
<button class="fa fa-link add-link"
uib-popover="popover"
popover-enable="isOpen">Show popover</button>
Update for the question update:
You are free to evaluate any boolean expression in the popover-enable attribute instead of the static isOpen which always evaulates to false in your example.
I have created an advanced plunkr to show that:
<input type="text" ng-model="downloadSize">
<button class="fa fa-link add-link"
uib-popover="popover"
popover-enable="isOpen()">Show popover</button>
with the controller code
$scope.isOpen = function() { return $scope.downloadSize > 100; }
You have a new text box where you can enter a number to simulate the download size. When it gets > 100, the popup will be enabled.
In order to handle the open state whit the popover-is-open value you must set popover-trigger="none" or maybe popover-trigger="'none'". As it says in the docs
Using the 'none' trigger will disable the internal trigger(s), one can
then use the popover-is-open attribute exclusively to show and hide
the popover.
Use
$scope.$apply(function () {
$scope.isOpen = false;
});
method for applying this property
Related
My view has
<input type="checkbox" class="check_box" ng-model="campaign.paused"
ng-click="CampaignPauseClicked(campaign, $event)" />
<p>campaign.paused == {{campaign.paused}}</p>
with the <p> being for debugging. It shows false, as it shoudl, given the data, but in the controller
$scope.CampaignPauseClicked = function(campaign, $event)
{
campaign.paused = ! campaign.paused;
when I breakpoint on the first code line, the value of campaign.paused is true (!).
I have searched the code and campaign.paused is not being written elsewhere.
Any idea what could be happening here?
[Update] I am using an ng-click fucntion, which I have not shown in its entirity, because I need it to "swallow" the $event and prevent it from propogating to the parent.
That's because ng-model is updating the value when you click the checkbox. You're undoing what Angular is doing for you.
If you want to do it by yourself in your $scope.CampaignPauseClicked function, remove the ng-model part from the html.
Otherwise, you can let Angular do its thing, leave the ng-model="campaign.paused" clause, and remove the first line from your ng-click callback.
Also you can replace the ng-click with the ng-change directive since you are using a checkbox.
ng-change will run everytime the checkbox state is changed (checked/unchecked)
<input type="checkbox" class="check_box" ng-model="campaign.paused"
ng-change="CampaignPauseChanged ($event)" />
<p>campaign.paused == {{campaign.paused}}</p>
And in your controller:
$scope.CampaignPauseChanged = function(event)
{
console.log(campaign.paused)
console.log(event)
}
Another option would be the ng-checked directive here is an example in this plunker. As you can clearly see the checkbox model returns true only if it is checked.
I use a tooltip directive from Angular UI Bootstrap inside one of my own directives. I want to manually toggle tooltip's visibility using tooltip-is-open attribute that Bootstrap Tooltip provides. Angular UI documentation states:
tooltip-is-open <WATCHER ICON> (Default: false) - Whether to show the tooltip.
So I assume it watches on the attribute's value. And so I want to bind a scope variable tooltipIsOpen to the attribute, hoping that changing tooltipIsOpen value in my directive's link function would toggle the tooltip visibility.
The behaviour that I get is weird.
If I bind tooltipIsOpen value as an expression: tooltip-is-open="{{ tooltipIsOpen }}", the tooltip doesn't appear at all, though I see that the DOM is updated properly (tooltip-is-open="false switches to tooltip-is-open="true" and back again to false) in reaction to mouse events.
If I bind tooltipIsOpen value as a variable: tooltip-is-open="tooltipIsOpen", the tooltip apears properly after the first mouse event, but then doesn't react to any further events, staying displayed all of the time with no way to hide it.
The working solution I found is bind tooltipIsOpen as a function call :scope.tooltipIsOpenFun = function() { return tooltipIsOpen; } and tooltip-is-open="tooltipIsOpenFun()", or as an object property: tooltip-is-open="tooltip.isOpen". Only then the tooltip works fine - shows and hides all of the time.
I suspect it's related to how AngularJS watchers work, also to the difference in how JavaScript primitives and objects are treated when assigning the values. Still I can't understand it.
Question
Can somebody explain to me step by step why the solution 1 doesn't work and 2 works only once?
Directive template (for method 2)
<div uib-tooltip="Tooltip message"
tooltip-is-open="tooltipIsOpened">
...
</div>
Directive link function
module(...).directive(..., function() {
return {
link: function(scope, elem, attr) {
/* Stop further propagation of event */
function catchEvent(event) {
event.stopPropagation();
};
function showTooltip(event) {
scope.$apply(function() {
scope.tooltipIsOpened = true;
/* Hide tooltip on any click outside the select */
angular.element(document).on('click', hideTooltip);
elem.on('click', catchEvent);
});
};
function hideTooltip() {
scope.$apply(function() {
scope.tooltipIsOpened = false;
/* Remove previously attached handlers */
angular.element(document).off('click', hideTooltip);
elem.off('click', catchEvent);
});
};
scope.tooltipIsOpened = false;
elem.on('mouseenter', showTooltip);
elem.on('mouseleave', hideTooltip);
});
1st way is incorrect because this directive expects variable name, not variable value. So correct:
<div uib-tooltip="Tooltip message" tooltip-is-open="xxx">
Or correct (you pass {{}} but then you pass not value of variable but value of variable that stores variable name):
<div ng-init="yyy='xxx'">
<div uib-tooltip="Tooltip message" tooltip-is-open="{{yyy}}">
2nd way astually works somehow:
http://plnkr.co/edit/OD07Oj2A0tfj60q2QKHe?p=preview
But it is very strange - how user supposed to click outside element without triggering mouseleave event?
The thing is that you do not need all this, just:
<button uib-tooltip="Tooltip message" trigger="mouseenter"
tooltip-is-open="tooltipIsOpened">
hello
</button>
works fine.
3rd way: if you see that 'open' does not work, but 'smth.open' works that usually means you faced 'dot issue' - you can not change parent scope variable from child scope directly, but you can change variable properties. There is a lot of examples and explanations of this issue.
When I click a button, it appears a popover which can be closed if you click the button inside the popover. However, if you click another button to open a popover, you will see two popovers at the same time and I want to keep just one.
I have tried with the trigger 'focus', but it closes the popover if I click in the textarea inside the popover, I expected that this trigger was called when you click outside of the popover.
Any idea for this? Can the methods $hide, $show be called from the controller?
Try to add ng-click="$hide()" on the dismissable element of the popover. I.E.:
<a class="btn btn-primary" ng-click="$hide()">Close</a>
It's not included in the documentation but it works for me, iff you use data-template for popover content, haven't tried with other opened popover yet.
This should be an old question, in latest version of angular-strap, a new attribute could be used in this case:
auto-close='1'
OK, I am pretty sure this is a terrible hack, but here goes. Assuming your popover templates all use the popover class (if you aren't using a custom template with the data-template attribute, they should), and they're siblings of the button that triggers them (if you haven't mucked with the container attribute, they are), you can apply the following directive to your popover buttons. Note: this assumes that the parent elements of your popovers and popover buttons have unique ids.
angular.module('yourApp.directives', []).directive('rmPopovers',
function($document,$rootScope,$timeout,$popover) {
return {
restrict: 'EA',
link : function(scope, element, attrs) {
var $element = $(element);
$element.click(function() {
$('.popover').each(function(){
var $this = $(this);
if($this.parent().attr('id') != $element.parent().attr('id'))
{
$this.scope().$hide();
}
}
);
});
}
}
}
);
And then
<button type="button" bs-popover rm-popovers [your data attribs here]>Button!</button
There is an issue in the angular-strap github project which asks exactly the feature you want.
Nevertheless, at the moment I'm writing this answer, it's still open.
trigger : 'focus' ,
worked for me on the same issue
Using this Code here: plunkr
How would I write the value on click to the console? It seems as though this will only work in a form submit environment, but I'm hoping I'm wrong.
Note that the rating element is converted into several i elements in a span, and each i has an ng-click applied to it already.
To summarize - When I select a star, spit out the value selected to the console.
Rating supports ng-click:
<rating value="rate" max="max" readonly="isReadonly"
on-hover="hoveringOver(value)" on-leave="overStar = null"
ng-click="setRating()"></rating>
In your controller, simply add:
$scope.setRating = function() {
alert($scope.rate);
};
Since clicking on an icon changes the value of the bound rating variable, you can just $watch the change of that scope variable.
eg.
$scope.$watch('rate', function(value) {
console.log(value);
});
http://plnkr.co/edit/bPmbgiI9ryZWSrn1zOfU?p=preview
I've been looking around and trying out different things but can't figure it out. Is it possible to hide an angular-ui tooltip with a certain event?
What I want to do is to show a tooltip when someone hovers over a div and close it when a users clicks on it because I will show another popup. I tried it with custom trigger events but can't seem to get it working. I made this:
<div ng-app="someApp" ng-controller="MainCtrl" class="likes" tooltip="show favorites" tooltip-trigger="{{{true: 'mouseenter', false: 'hideonclick'}[showTooltip]}}" ng-click="doSomething()">{{likes}}</div>
var app = angular.module('someApp', ['ui.bootstrap']);
app.config(['$tooltipProvider', function($tooltipProvider){
$tooltipProvider.setTriggers({
'mouseenter': 'mouseleave',
'click': 'click',
'focus': 'blur',
'hideonclick': 'click'
});
}]);
app.controller('MainCtrl', function ($scope) {
$scope.showTooltip = true;
$scope.likes = 999;
$scope.doSomething = function(){
//hide the tooltip
$scope.showTooltip = false;
};
})
http://jsfiddle.net/3ywMd/
The tooltip has to close on first click and not the 2nd. Any idea how to close the tooltip if user clicks on div?
I tried #shidhin-cr's suggestion of setting $scope.tt_isOpen = false but it had the rather significant issue that, while the tooltip does fade out, it is still present in the DOM (and handling pointer events!). So even though they can't see it, the tooltip can prevent users from interacting with content that was previously behind the tooltip.
A better way that I found was to simply trigger the event used as tooltip-trigger on the tooltip target. So, for example, if you've got a button that's a tooltip target, and triggers on click...
<button id="myButton"
tooltip="hi"
tooltip-trigger="click">
</button>
Then in your JavaScript, at any point, you can trigger the 'click' event to dismiss your tooltip. Make sure that the tooltip is actually open before you trigger the event.
// ... meanwhile, in JavaScript land, in your custom event handler...
if (angular.element('#myButton').scope().tt_isOpen) {
angular.element('#myButton').trigger('click');
}
Since this triggers the actual internals of AngularUI's Tooltip directive, you don't have the nasty side-effects of the previous solution.
Basically you cannot play with the tooltip-trigger to make this work. After digging through the ToolTip directive code, I found that the ToolTip attribute exposes a scope attribute called tt_isOpen.
So in your ng-click function, if you set this attribute to false, that will make the tooltip hide.
See the updated demo here
http://jsfiddle.net/3ywMd/10/
Like this
app.controller('MainCtrl', function ($scope) {
$scope.likes = 999;
$scope.doSomething = function(){
//hide the tooltip
$scope.tt_isOpen = false;
};
})
Michael's solution got me 90% of the way there but when I executed the code, angular responded with "$digest already in progress". I simply wrapped the trigger in a timeout. Probably not the best solution, but required minimal code
// ... meanwhile, in JavaScript land, in your custom event handler...
if (angular.element('#myButton').scope().tt_isOpen) {
$timeout( function(){
angular.element('#myButton').trigger('click');
}, 100);
}
For future reference, the accepted answer angular.element('.yourTooltip').scope().tt_isOpen will not work in new versions as tooltip has been made unobservable. Therefore, the entire tootlip is removed from DOM. Simple solution is to just check if tooltip is present in DOM or not.
Borrowing from #liteflier's answer,
// ... meanwhile, in JavaScript land, in your custom event handler...
if (angular.element('.yourTooltip').length) { //if element is present in DOM
setTimeout( function(){
//Trigger click on tooltip container
angular.element('.yourTooltipParent').trigger('click');
}, 100);
}