Event listener disappears inside ng-repeat - javascript

My HTML form has many questions I create using ng-repeat.
I want to create a pop-over for some questions.
When I put the button that triggers the pop-over outside the ng-repeat, it works. Inside the ng-repeat it does not.
This works (button before ng-repeat):
<div class="row">
<div class="col-md-12">
<button title="" data-toggle="popover" data-placement="top" data-trigger="hover" data-title="Popover on hover" data-content="And here's some amazing content. It's very engaging. Right?" class="btn btn-primary btn-wide">
hover
</button>
<div ng-repeat="q in config.questionnaire.questions">
Producing this:
This does not work (button after ng-repeat):
<div class="row">
<div class="col-md-12">
<div ng-repeat="q in config.questionnaire.questions">
<button title="" data-toggle="popover" data-placement="top" data-trigger="hover" data-title="Popover on hover" data-content="And here's some amazing content. It's very engaging. Right?" class="btn btn-primary btn-wide">
hover
</button>
Inspecting the button element on google chrome, I found that some event listeners were removed:
These are the event listeners for the button before the ng-repeat:
These are the event listeners for the button after the ng-repeat:
As you can see, mouseover and mouse out listeners disappeared.
Why?
What can I do?

If you are using Bootstrap with your Angular project, think of using Angular UI library.
https://angular-ui.github.io/bootstrap/#/popover
It provides many directives which make it easier to connect Bootstrap with Angular. I tested the uib-popover directive with ng-repeat and it works properly this way. The code is pretty simple:
//...
<div ng-repeat="t in main.testArray">
<button uib-popover="My popover content" popover-title="Popover title" popover-trigger="mouseenter">{{t.text}}</button>
</div>
//...
I will try to investigate your problem further, but the library seems to be an easy workaround.
Edit
I think I also managed to figure out a solution without using external library. What I did was creating a directive which initializes Boostrap popover on specified element. This way you make sure that the popover function will be fired when elements are rendered. I guess this was the reason why it didn't work with your method. You probably invoked the popover function before elements were really rendered as ng-repeat does this with a delay.
And here is the code:
angular.module('moduleName')
.directive('bootstrapPopover', function() {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.popover();
}
};
});
And then use directive on element:
<div ng-repeat="t in main.test">
<button data-toggle="popover" data-placement="top" data-trigger="hover" data-title="Test" data-content="Test"
class="btn btn-primary btn-wide" bootstrap-popover>hover {{t.text}</button>
</div>
However, I would still recommend trying the Angular UI out. I used it in the last Angular project and it was really helpful.

Related

Is it possible to suppress Durandal navigation?

My web application makes use of bootstrap, knockout and durandal. Below is a snippet of the rendered html, that defines a row with five columns. Irrelevant details are left out.
<div class="row list-row" data-bind="click: function(vm, event) { $(event.currentTarget).trigger('durandal-navigation'); }">
<div class="col-xs-2">
...
</div>
<div class="col-xs-2">
...
</div>
<div class="col-xs-6">
...
</div>
<div class="col-xs-1">
...
</div>
<div class="col-xs-1">
<button class="btn btn-default btn-xs deletebutton" data-bind="click: DeleteClicked">
<i class="fa fa-trash"></i>
</button>
</div>
</div>
Now when the mouse hovers over any of those divs, the css in place lits up the entire row which is how it is supposed to be, and a click navigates to the desired screen with durandal. The latter, however, should not be the case when the user clicks the button in the last column: only the DeleteClicked function should fire.
Is there any way to suppress the navigation here?
I've found a quite simple way around it by using sessionStorage: DeleteClicked now contains the line
sessionStorage.setItem("cancelNavigation", true);
The part of the application that actually implements the navigation:
$(document.body).on('durandal-navigation', function (event) { ... }
...performs a check on the status of "cancelNavigation" before calling router.navigate(...); and in addition of course removes the cancelNavigation key from sessionStorage. Works perfectly!

Accessible popovers for additional help information

tl;dr: How would I implement an accessible popover? (I'm using bootstrap at the moment, but open to any ideas)
One of the biggest accessibility problems I face is the use of popovers when providing extra help information.
The way I understand it, popovers (and I guess more broadly, modals) are used for extra information when a tooltip cannot suffice. Popovers require the user to "open/click/activate" a help button for a new DOM element to be appended (or otherwise displayed), with the help information. While tooltips passively shows/speaks information whenever a user focuses the element. The tooltip widget itself is still being considered by WAI-ARIA
Say I have a text-input field with a label. I want to attach supplementary content to that input, in the form of a clickable/actionable button.
Initially I had the popover button in the label, before finding out the hard way that label's can't have block-level child elements.
I'm aware this probably isn't the best way of implementing an accessible popover. Here is my help button:
<div class="facs-ctl-help">
<a role="button" aria-label="Show help for Template Id 2,003" tabindex="0" data-toggle="popover" title="">
<span class="fa fa-info btn-floating waves-effect facs-help-icon"></span>
</a>
</div>
and here is my popover:
<div class="popover tooltip-help" role="tooltip">
<div class="arrow"></div>
<h3 tabindex="-1">
<i class="fa fa-info btn-floating waves-effect facs-help-icon"></i>Help
<span class="offscreen"> for Template Id 2,003</span>
<span class="offscreen"> popup</span>
</h3>
<div class="popover-body"></div>
<input type="button" class="btn pull-right tooltip-hide-btn" value="hide" aria-label="Hide help for Template Id 2,003">
<div style="width: 100%; clear:both;"></div>
</div>
What should I be using/doing? Would this be a good use case for live-regions? If so, any example code?
It doesn't necessarily have to be a live region. It feels more like a modal dialog, especially if you have interactive elements in it, such as the hide button.
There's a working example of an accessible modal dialog on https://github.com/gdkraus/accessible-modal-dialog

Open a box with Bootstrap and Angularjs not working

I am beginning with AngularJS, and I am wondering why there is a conflict between Bootstrap and Angularjs when I try to simply open a box like this:
Link:
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#open-baggage-box" aria-expanded="false" aria-controls="open-baggage-box">Add Now</a>
Box:
<div id="open-baggage-box" class="collapse add-price-section">
<div class="open-holder">
<div class="container">
</div>
</div>
</div>
It actually does not work and I don't really know why. Thank you
As angular templates are usually dynamically loaded, bootstrap can look for collapse element before it is rendered.
If you want to use Bootstrap UI elements with AngularJS, I recommend UI Bootstrap which implements them as Angular directives.
In your case, collapse directive will do the job :)

making accordion panel open when clicking on header rather than just title

I found this stackoverflow questions which looks to be the same problem I am having. That is the default behavior is for angular ui-bootstrap accordion to only open when you click on the panel title and not anywhere else on the panel.
ng-click on accordion panel header
The solutions presented seems to get out of sync when one time clicking on the panel and then clicking on the title. Sometimes you have to click twice to get it back in sync. I noticed this snippet on the documentation, To use clickable elements within the accordion, you have override the accordion-group template to use div elements instead of anchor elements, and add cursor: pointer in your CSS.
Can someone provide and example of using div tags instead of anchor elements?
You have to customise the template for accordion-group to use clickable links otherwise it will trigger unexpected routing. You can modify the template as below:
<script id="uib/template/accordion/accordion-group.html" type="text/ng-template">
<div role="tab" id="{{::headingId}}" aria-selected="{{isOpen}}" class="" ng-keypress="toggleOpen($event)">
//this is previously <a role="tab"> - replace it with div
<div role="button" style="border-top:1px solid #e6e6e6" data-toggle="collapse" href aria-expanded="{{isOpen}}" aria-controls="{{::panelId}}"
tabindex="0" ng-click="toggleOpen()" uib-accordion-transclude="heading" ng-disabled="isDisabled"
uib-tabindex-toggle><span uib-accordion-header ng-class="{'text-muted': isDisabled}">{{heading}}</span>
</div>
</div>
<div id="{{::panelId}}" aria-labelledby="{{::headingId}}" aria-hidden="{{!isOpen}}" role="tabpanel"
class="panel-collapse collapse" uib-collapse="!isOpen">
<div class="" ng-transclude></div>
</div>
</script>
You can put this template in your view where you are using accordion. This will override your default accordion-group template that comes from angular ui bootstrap tpls library.

jQuery click function not triggering

I am trying to integrate a bootstrap layout into my angular.js project.
I have added the bootstrap.js and bootstrap.css and the layout custom CSS and JS.
my project have jquery added to it.
The problem that I am facing is that a click handler is not being triggered.
this is my code:
$(document).ready(function () {
alert('ready');
$('[data-toggle="offcanvas"]').click(function () {
alert('click');
$('.row-offcanvas').toggleClass('active')
});
});
a popup with "ready" popups at each page refresh however when i click the button that has the attribute data-toggle="offcanvas" nothing pops up.
I have even tried to ad an id attribute to the button and target the button in jquery as follows with no success:
$('#toggleButton').click(....);
the button is html looks like the following:
<div class="col-xs-12 col-sm-9">
<p class="pull-right visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
</p>
what seems to be going wrong?
Thanks in advance.

Categories