• In Angular, why does ng-click button fires multiple times?

    778 Views Asked by At

    I have some buttons on in my app that look like this:

    <ul class="gallery-buttons">
        <li><button class="video-gallery" ng-click="getGallery('video',{{install.id}})"></button></li>
        <li><button class="image-gallery" ng-click="getGallery('image',{{install.id}})"></button></li>
    </ul>
    

    my controller:

    var nanoApp = angular.module('nanoApp', ['ngRoute', 'ngCordova']);
    nanoApp
    .config(function ($routeProvider, $compileProvider) {
        ...code to setup all my routes using the $routeProvider...
    })
    .controller('InstallationListController', ["$scope", "$cordovaSQLite", "$rootScope", function ($scope, $cordovaSQLite, $rootScope) {
        document.addEventListener("deviceready", function () {
            ...do some database calls and setup initial $scope...
            $scope.getGallery = function (galleryType, installId) {
                console.log('made it');
            }
        });
    
    });
    

    My buttons are part of a controller and $scope that has an ng-repeat of 41 elements. When I select one of them I get the console.log 41 times. Even if I move the buttons outside the ng-repeat so there are only one set, it still fires 41 times.

    --- EDIT ---

    info on my ng-repeat, note that this is from my template pulled in my $routeProvier.when and the controller is declared there and not on the container:

    <div id="installationlist" class="container">
    
        <div class="install" section-width directive-scroll-to="{{moveframe}}" get-products install-index="{{$index}}" ng-repeat="install in installations track by $index">
            <div class="details">
                <div class="text">
                    <div class="text-container">
    
                        <p class="industry">Industry: {{install.industry}}</p>
                        <p class="title">{{install.name}}</p>
    
                        <p class="location">{{install.location}}</p>
    
                        <div class="product-block">
                            <p class="product" ng-repeat="product in install.products track by $index">{{product.name}}</p>
                            <p class="pixelPitch" ng-if="install.pixelPitch != null">{{install.pixelPitch}}</p>
                        </div>
    
                        <p class="desc">{{install.instText}}</p>
    
                    </div>
                </div>
    
                <ul class="gallery-buttons">
                    <li><button class="video-gallery" ng-click="getGallery('video',install.id)"></button></li>
                    <li><button class="image-gallery" ng-click="getGallery('image',install.id)"></button></li>
                </ul>
            </div>
    
            <div class="image" style="background-image:url('img/products/nanoslim-bkg.jpg')"></div>
        </div>
    
    </div>
    
    0

    There are 0 best solutions below