Implementing interactive popover / callouts in angular

Question

We are doing a project in Angular.js, and the layouts we get from our UX user make heavy use of interactive popovers / callouts.

The problem is that I can not imagine these concepts in angular in an understandable way. Conceptually, they require their own templates, controllers, and they need to be created and destroyed throughout the page. Overlapping elements without changing the layout.

Bootstrap modifications are not considered an acceptable alternative. The founders are really interested in having interactive dialogs display specific elements on the page.

Is there something that can do this? Or do you have any tips?

Answer 1

I would follow a directive or a set of directives that you can show when focusing or blurring or hovering other elements on the mouse. Depending on your implementation, you can leave with one directive that opens onFocus or onBLur. Angular 1.2 supports ng-focus, ng-mouseover and ng-blur, which you can use to do something like this.

<div class="check-thing"> <button class="checkmark" ng-mouseenter="showModal = true" ng-mouseleave="showModal = false"></button> <modal ng-show="showModal" model="modal-model"></modal> </div> 

Then simply indicate that the form in the directive fills the two-way connected modal model or launches a callback when the user clicks the OK button that the controller expects. Perhaps it would be even better to make the whole control thing a directive and use them in a repeat.

Beware , none of this will be very friendly on the tablet or phone, as they do not always support freezes.

Answer 2

Have you looked at modular models of AngularUI Bootstrap? ( http://angular-ui.imtqy.com/bootstrap/#/modal ) They fit very well in AngularJS and can really be in the style of almost any kind you want. Transferring data and receiving data is very simple. Most UX users don't seem to understand how the web works (mine doesn't seem to be the case), and it was a real savior for me and my team.

Answer 3

I know this is an older post, but since no answer has been selected, I would like to point out a possible solution that I recently met.

The Angular UL BS Popover user interface allows you to align it with the element you are aiming for, which you can click, drag and focus.

For content, you have the choice between text, line and HTML template. Based on the question, the template is most likely the one that will be used so that the content is dynamic and includes interaction.

You can find additional information and a demo of how it works: https://angular-ui.imtqy.com/bootstrap/