Code here: https://plnkr.co/edit/ysD1JN0ELqu7ACgkkp79?p=preview
I have two buttons. One is "State1" and another is "State2".
In the beginning, it is in "State2" button. Then I click "State2" button, it toggle to "State1" button, also generate popover.
I want to click out of "State1" button and popover, then it will change from "State1" button to "State2" button. I use popover-trigger="outsideClick", but it does not work. Please advise. Thanks
<div ng-click="Ctrl.Check = !Ctrl.Check" popover-trigger="outsideClick">
<a ng-class="{'btn-danger': !Ctrl.Check, 'btn-default': Ctrl.Check }" confirm-link="Ctrl.deleteCurrent(Ctrl.A)" uib-popover="I appeared on focus! Click away and I'll vanish..." popover-trigger="outsideClick" popover-placement="right">
{{ Ctrl.Check ? 'State1' : 'State2' }}
</a>
</div>
here is the plunker
https://plnkr.co/edit/KXWzDN882fWEByUNzks6?p=preview
What I did
<a
ng-class="{'btn-danger': !isOpen, 'btn-default': isOpen }"
state-change-capture
confirm-link="Ctrl.deleteCurrent(Ctrl.A)"
uib-popover="I appeared on focus! Click away and I'll vanish..."
popover-trigger="'outsideClick'"
popover-is-open="isOpen"
ng-click="isOpen = !isOpen"
popover-placement="right">
{{ isOpen ? 'State1' : 'State2' }}
</a>
in the controller
$scope.isOpen = false;
$scope.$watch('isOpen', function (oldVal, newVal) {
//just for reference in case you need to know the status of popover
});
added a property for uib-popover known as popover-is-open="isOpen"
which tells if the popover is visible or not and based on that set the State 1 or 2
Also if you need to observe it then have added a watch to controller, just in case you need it.
You're missing the '' in the popover-trigger, and you don't need the first one on the div itself:
<div ng-click="Ctrl.Check = !Ctrl.Check">
<a ng-class="{'btn-danger': !Ctrl.Check, 'btn-default': Ctrl.Check }" confirm-link="Ctrl.deleteCurrent(Ctrl.A)" uib-popover="I appeared on focus! Click away and I'll vanish..." popover-trigger="'outsideClick'" popover-placement="right">
{{ Ctrl.Check ? 'State1' : 'State2' }}
</a>
Related
In my header.html page I have this button:
<button class="tabs-menu-btn" ng-click="toggle = !toggle" ng-class="{'open' : toggle}">
<div></div>
</button>
And on wrapper.html I have this div:
<div class="tabs-toolbar" ng-class="{'open' : toggle}">
<ul class="tabs">
<li class="tab">
<a ng-click="toggle = !toggle" ui-sref-active="selected" ui-sref="flows"><span>Flows</span></a>
</li>
</ul>
</div>
So when the button is clicked I want to toggle the 'open' class on the button and div - but currently it only works on the button, if i move the 'tabs-toolbar' onto the same html page it works. Does anyone know what I am doing wrong please?
header and wrapper are part of two different scope. So when you click toggle its is changing only the $scope.header.toggle = false
sample Example:
$scope.header.toggle = true
$scope.wrapper.toggle = false // its not getting reflected because, this scope will not get effected with the action
Solution
make both variable as part of same controller or trigger a function which changes both scope
I am using angular package angular-xeditable the problem is I want to call its event onaftersave after i edit the label here is my html:
<h4 >{{ title.key || 'empty' }}
<span onaftersave="save()" editable-text="title.key ">
<i class="fa fa-pencil-square-o" "></i></span>
</h4>
the event onaftersave is called even if i click on the edit button and also while typing in the field
what I want is to call the event only when I click the button
Try to use this code this will helps to prevent function call.
<span>
<a onaftersave="save();" data-ng-model="title.key" e-placeholder="Your text" editable-text="title.key">
<span>{{title.key || 'empty'}}</span>
</a>
</span>
I have two states for a button, "State1" and "State2".
It defaults to "State2". When I click the button, it toggles to "State1".
When I click anywhere outside the button, I need it to change from "State1" back to "State2". This is my code:
<div ng-click="Ctrl.Check = !Ctrl.Check">
<a ng-class="{'btn-danger': !Ctrl.Check, 'btn-default': Ctrl.Check }" >
{{ Ctrl.Check ? 'State1' : 'State2' }}
</a>
</div>
It sounds like you're just checking whether the element has focus. This is much easier than putting down a bunch of ng-click handlers all over your form just to toggle one input.
Use ng-focus and the corresponding ng-blur. If you use HTML elements that can have focus (like a <button>), you can use code like
<button type="button" class="btn"
ng-class="{'btn-danger': !Ctrl.Check, 'btn-default': Ctrl.Check }"
ng-focus="Ctrl.Check = true"
ng-blur="Ctrl.Check = false">
{{ Ctrl.Check ? 'State1' : 'State2' }}
</button>
Demo on plnkr
I have this popover with template
<i class="fa fa-link" popover-placement="right" uib-popover-template="'newReferenceTemplate.html'" popover-title="New link"> Add new external reference </i>
So when I click on that link icon, a popover opens witht this tamplate
<script type="text/ng-template" id="newReferenceTemplate.html">
<label>Title</label> <br>
<input ng-model="link.Title"> <br>
<label>Url</label> <br>
<input ng-model="link.Url"><br>
<i class="fa fa-floppy-o" > Save </i>
</script>
When I press that 'floppy' icon, I'd like to close the popover. Are there any ways of doing this?
All I can find on documentation is the popover-is-open value, but I don't know if I can use this somehow, any thoughts?
Step 1 : Add popover-is-open="isOpen" to the trigger link.
<i class="fa fa-link add-link"
popover-placement="right"
uib-popover-template="'newReferenceTemplate.html'"
popover-is-open="isOpen"
popover-title="New link"> Add new external reference </i>
Step 2 : When you click the floppy icon inside the popover, set isOpen to false:
This is the save icon of the popover:
<i class="fa fa-floppy-o" ng-click="save()"> Save </i>
This is in the controller:
$scope.save = function () {
$scope.isOpen = false;
};
See plunker
What had worked for me (in an angularJs app) is using
popover-trigger="'outsideClick'"
be aware to use it as it is, means, hard copy of string
"'outsideClick'".
If u don't use angularJs, u can just write:
popover-trigger="outsideClick"
Example:
<div uib-popover-template="'ApproveReject.html'"
popover-trigger="'outsideClick'"
popover-placement="bottom-right"
ng-click="onSubmitOrderStatus('date',$event);approveDates('date')">
Approve
</div>
I'm creating a web app using AngularJS + Twitter Bootstrap and Bootstrap-UI. When I place a tooltip on a button, it shows as expected; but if the button gets disabled (by the underlying controller) after being clicked, and the tooltip was being shown, the tooltip is not hidden and stays there forever. Here's a repro:
Plunker: http://embed.plnkr.co/numlaAuLOxh3a03Z7O85/preview
Just hover the button to make the tooltip appear, and then click it. The button is disabled, and the tooltip stays there. How can I avoid this behavior and have my tips correctly hidden?
I found that using simply replacing buttons with anchor tags worked perfectly for me.
<a role="button" type="button" class="btn btn-danger"
ng-click="someAction()" tooltip="Tooltip" ng-disabled="isDisabled">
<span class="glyphicon glyphicon-minus"></span>
</a>
Searching through GitHub issues I found the suggestion (seems to be related to the issue opened by you?) to use wrapping element that has a tooltip around the element: http://jsfiddle.net/RWZmu/
<div style="display: inline-block;" tooltip="My Tooltip">
<button class="navbar-btn btn-danger" ng-click="test()" ng-disabled="isDisabled" tooltip="Here's the tip">
<i class="glyphicon glyphicon-forward"></i>
</button>
</div>
Use the following logic here
HTML
<div ng-app="someApp" ng-controller="MainCtrl"
class="likes" tooltip="show favorites" tooltip-trigger="mouseenter"
ng-click="doSomething()">{{likes}}</div>
JS
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.likes = 999;
$scope.doSomething = function(){
//hide the tooltip
$scope.tt_isOpen = false;
};
})
Souce
Hide angular-ui tooltip on custom event
http://jsfiddle.net/3ywMd/10/