The AngularJS ng-click event isn't fired in a Boostrap popover.
<button id="delAnnot" type="button" class="btn btn-default"
data-toggle="popover" data-html="true" data-placement="bottom" data-content="
<button type='button' class='btn btn-danger' ng-click='vm.removeAnnotation(scenevm.sharedService.curAnnotation.ID)'>delete</button>">
<span class="glyphicon glyphicon-trash"></span>
</button>
I initialized my popover with a container so that the popover is within my angular controller:
$(".btn").popover({
placement: 'bottom',
trigger: 'click',
container: '#sceneCtrl'
})
For sure 'ng-lick' is not going to work try 'ng-click'. You can try as well using bootstrap directives http://angular-ui.github.io/bootstrap/ instead doing that in jQuery way.
Regards
Sylwester
Checkout this thread: AngularJS ng-click broken inside a popover
And here is the code that worked for me:
//Initialize & config popover controls
$('[data-toggle="popover"]').popover({ html : true })
.click(function(ev) {
//this is workaround needed in order to make ng-click work inside of popover
$compile($('.popover.in').contents())($scope);
});
And don't forget to include $compile and $scope as dependency in your module.
Related
I am trying to implement popover functionality using Bootstrap & angularJS but popup doesn't seem to work & i don't get any errors either. Any help would be highly appreciated
<button popover-template="'popover.html'"
popover-placement="top"
popover-trigger="click"
type="button"
class="btn btn-default">
Mouse over me
</button>
I added ngAnimate & ui.bootstrap as a dependent to my angular application. Here is the code for the popover.html
<label class="Label">
test
</label>
It doesn't acually create a popover on click & doesn't create an error message either.
The name of the directive is uib-popover-template:
<button ̶p̶o̶p̶o̶v̶e̶r̶-̶t̶e̶m̶p̶l̶a̶t̶e̶=̶"̶'̶p̶o̶p̶o̶v̶e̶r̶.̶h̶t̶m̶l̶'̶"̶
uib-popover-template="'popover.html'"
popover-placement="top"
popover-trigger="click"
type="button"
class="btn btn-default">
Mouse over me
</button>
For more information, see
Angular UI Bootstrap Directive API and Demo - Popover
For more information, see
I make a simple demo in which I make custom cell of table like that
{
field: 'id',
name: '',
enableColumnMenu: false,
cellTemplate: 'edit-button.html',
width: 34,
enableFiltering: false,
},
I am using angular ui grid from here
http://ui-grid.info/docs/#/tutorial/101_intro
I try to get click event but it not working properly .I try like that
<div class="ui-grid-cell-contents">
<button type="button" class="btn btn-xs btn-primary" ng-click="self.editRow(grid, row)">
<i class="fa fa-edit"></i>
</button>
</div>
I make editRow function in controller .but it not fire why
self.editRow = editRow;
function editRow(grid, row) {
alert('--')
}
I have one more Question why it show error when I include dependency of $uibModal already include angular and ui bootsrap files
here is my code
http://plnkr.co/edit/G6AyH2TPfqOxnyPKx0g1?p=preview
uiGrid binds the parent scope to a scope called "appScope", you can get your functions from there (docs here: http://ui-grid.info/docs/#/tutorial/305_appScope)
<div class="ui-grid-cell-contents">
<button type="button" class="btn btn-xs btn-primary" ng-click="grid.appScope.c.editRow(grid, row)">
<i class="fa fa-edit"></i>
</button>
</div>
plunkr: http://plnkr.co/edit/jSD6G7K3eHiKNignNnoR?p=preview
$uibModal couldn't be found because you're probably still using an older version of ui-bootstrap that still uses the non-prefixed version of the services ($modal)
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'm attempting to use Boostrap 3 tooltips with Angular JS so that the tooltip displays the value of an object in the Angular scope. This works fine when the page loads, but when the value of the object in the scope is updated the tooltip still displays the original value.
HTML:
<div ng-app>
<div ng-controller="TodoCtrl">
<span data-toggle="tooltip" data-placement="bottom" title="{{name}}">Hello {{name}}</span>
<button type="button" ng-click="changeName()">Change</button>
</div>
Javascript:
function TodoCtrl($scope) {
$scope.name = 'Ian';
$scope.changeName = function () {
$scope.name = 'Alan';
}
}
$(document).ready(function () {
$('span').tooltip();
});
There's an example demonstrating my code so far and the issue in this Fiddle
Instead of:
<span data-toggle="tooltip" data-placement="bottom" title="{{name}}">Hello {{name}}</span>
Use:
<span data-toggle="tooltip" data-placement="bottom" data-original-title="{{name}}">Hello {{name}}</span>
Bootstrap Tooltip first checks data-original-title, so as long as you keep this value updated, you'll be fine. Check out this working Fiddle
My guess is that it is missing an apply for changed values, so angular knows nothing about that and does not update. I recommend angular ui bootstrap instead of raw bootstrap components for this reason.
http://angular-ui.github.io/bootstrap/
This way there is no need for jquery which is a bonus in my book.
EDIT:
try this in change handler for a quick and dirty workaround:
$('span').tooltip('hide')
.attr('data-original-title', $scope.name)
.tooltip('fixTitle');
But as i said, check out angular version as this hack has several issues....
For Latest Angular Versions Use: [attr.data-original-title]="dynamicTooltipMsg"
<button
data-toggle="tooltip"
[data-title]="dynamicTooltipMsg"
[attr.data-original-title]="dynamicTooltipMsg">
Testing
</button>
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/