Ng-click on a button dynamically added in popup

ionic-v1
1

I am using FancyBox to show images and it works fine. In the image popup I am looking to show a button and want to trigger some event based on it.

Below is the code.

 query.find({
        success: function(results) {

            // Get Remote Data

            $scope.$apply();

            $(".fancybox").fancybox({
                beforeShow: function() {
   
                    this.title += '<button class="button" ng-click="shareNow()">Share</button>';

                }
            });
   
        },
        error: function(e) {
        }

The ng-click event is not triggered from the fancybox image popup. The event is triggered from other components in the view.

2

The reason ngClick is not triggered is that you are not using Angular to render the template, so the ngClick never gets registered. I’m not entirely sure about the best approach here, since this is kind of melding non-Angular and Angular and that often gets a little bit messy.

You might be able to use the $compile method in Angular before you add the value to the title, but I’m not 100% sure that will work since I can’t really tell how the scopes work in this code snippet.

1 Like
3

First, thanks a lot for your time to look on my question.

That’s sad to hear. Is it a restriction on AngularJS?

I believe there should be some way to achieve this. Any thoughts?

Could you please direct me in the right direction?

4

My personal suggestion is to not use fancybox. You could get it to work, but that would require a strong command of Angular. Its not a restriction, but it is that Angular features do not work when code is executed inside of jQuery.

To go more broad. I would really avoid using jQuery plugins. They were great in the past, but Angular has a large ecosystem of modules to do the same things that you can find something. Look at http://ngmodules.org for a good list of Angular modules.

5

Thanks for your advice. Person like you make new people like me feel like home :smile:

I have considered not to use jQuery but I decided to use Fancybox as there is no alternatives for it in Angular. I did some research and could not find any.

If you could tell me anything as an alternative image gallery/light box, I would be really happy to try and use it.

This is my first Anuglar/Ionic app that I am developing. Everything is new to me as I am transitioning from Mainframe COBOL development. :smiley:

6

Fancybox is a jQuery plugin, so it requires jQuery to run.

Well I don’t have a suggestion exactly, but a lightbox doesn’t really seem to be as useful on mobile. The size of the screen is typically limiting, so its hard to know what you want to achieve exactly. Mobile design differs from traditional web design, and requires thinking about how things work on a touch interface. I think your first challenge is to think about how to build a good image viewing experience on mobile, which may require you to merge/create several different features.

One fairly simple approach could be to use the Ionic modal with a slidebox inside.

7

Thanks for the idea. I will look about using slidebox with modal for image preview.