no working ng-click

[julioVillagomez]

I want to do the following method but it does not work for me any idea?

`

hola mundo

</ui-carousel>`

$scope.ctrl.openGaleria = function(image){ console.log(image) }

[ccasad]

I'm trying to do the same thing by having an ng-click within my carousel-item. Is this not supported?

[shefaleechaudhary]

I am getting same issue. ng-click is not working inside ui-carousel.

[charlemana]

I'm also getting the same issue.

[shantanu1227]

I am also getting the same issue

[mcblum]

Same issue for us as well. In fact, just putting anything within the ng-click such as console.log('working') does not work. Is there something about the code that is stopped execution of js on click events?

[mcblum]

Just a quick heads up, I figured this out. Since a new scope is created with each item, you'll need to append the function you want to execute to each slide, and then use item.callback() to fire the callback for that particular slide. Here our example code:

$onChanges() {
        const validCarouselItemsOnly = this._.filter(this.carousel, (item) => {
            const imageUrl = this._.get(item, 'image.url');
            const headline = item.headline;

            return imageUrl && headline;
        });

        this.formattedCarousel = validCarouselItemsOnly.map((carouselItem) => {
            const link = this._.get(carouselItem, 'link[0]');

            if (link) {
                carouselItem.go = () => {
                    this.LinkService.go(link);
                };
            } else {
                carouselItem.noLink = true;
            }

            return carouselItem;
        });
    }

In our case we're filtered to carousel items that have the required data, then we're mapping those items, checking for a link, and then added a callback if one exists. This implementation works as expected.

[afeltham]

Hi @mcblum - great to hear you've been able to fix this. However, i can't make out where the code you've pasted above should go! can you give a wider example please? Thank you.

[markriemann]

@mcblum - can you provide a more complete example, please.

[mcblum]

@afeltham @markriemann sure thing. So let's say we have items that's an array, and each item needs to have a callback method, which we can access within each slide using item.callback.

Within each slide we can say item.name or item.description or item.image, but we can also say ng-click="item.callback()" and trigger the function that has been assigned to each item. If each slide needs a different callback, then you may need to loop through each item, check what it is, and assign the appropriate callback. If they can all use the same, you could use items.map((item) { item.callback = () => { console.log('thing') } return item }); to give each item a callback.

Does this make sense?

[afeltham]

Thank you @mcblum - i can confirm that your example works. Really appreciate you working this out and sharing your answer. :)

[markriemann]

@mcblum , thanks.

[mcblum]

@afeltham @markriemann no problem! Happy coding.

[muralikrish204]

On mouseover of the carousel image, I am displaying an icon and that icon has ng-click. but that ng-click is not working. Can you someone please let me know how to fix this issue. `

library_add

`

The function is :

$scope.addToPlaylist = function(_item){ console.log("item details",_item); }

addToPlaylist function is my controller function.

[acharyaks90]

yes It working geeks Put html ng-click ="item." <ui-carousel slides="slides" slides-to-show="3" slides-to-scroll="3" style="margin:auto;width: 90%;margin-left: inherit;" autoplay="true" autoplay-speed="2000" dots="true">

<br><br>

<carousel-prev>
  <!-- placed your previous button here -->
  <button class="btn btn-success carousel-prev carousel-btn" style="background-color: #333;">Prev</button>
  <!-- end -->
</carousel-prev>
<
<carousel-next>
  <!-- placed your next button here -->
  <button class="btn btn-success carousel-next carousel-btn" style="background-color: #333;">Next</button>
  <!-- end -->
</carousel-next>

[venkywd]

Thank you mcblum It helped me.

[InCarNaTeDuDe]

Any chance of plnkr or codepen how u managed ? @venkywd @mcblum @afeltham @markriemann Thanks in Advance

[robmweb]

I got it work a bit hacky, but reliably. Within a you can do any ng-click referencing a grandparent scope (the parent of ) with:

ng-click="$parent.$parent.theFunction()"

[FadiAboMsalam]

@robmweb solution worked perfectly with me any drawback for this ?

[gdlmanuv]

Indeed the callback function solves the issue.

Let's say, I have an array of mostRated elements, so, for each of them, I create a function, like this:

$scope.mostRated.forEach(function (r) { r.callback = function () { $scope.viewDetails(r); }; });

then in the html we are now able to use the ng-click ng-click="item.callback()"

. . . It worked for me, Hope it works for all of you guys!

[lucianolemgruber]

@robmweb solution worked perfectly with me too

[puneethshetty12]

Thank you @robmweb ! Works fine!