AngularJS: Function not being called on ng-click

Question

I have a function call using ng-click at the top of the view and the function is defined at the bottom of the controller. When I click the 'next' button the function goToGetLocation() is not called for some reason.

Here is the web page/view: http://alainwebdesign.ca/pl2/#/petType

view:

<md-button ng-click="goToGetLocation()" ng-disabled="checkSpeedSet == false" sticky class="md-raised md-primary">Next</md-button>

<h2></h2>

<h2>Choose the pet type that best matches your pet</h2>

<div style="text-align: center">

    <button ng-model ="next"  style="height: 300px; width: 300px; display: block; margin: auto" class="button" 
    ng-class="{active : activeMenu === 'fast'}" ng-click="activeMenu = 'fast'; setSpeed();">
        <img height="220px" width="220px" src="images/greyhound.png" />
   </button>
    <h4>Fast (Avg Speed: 46km/h)</h4>
    <p>Includes dogs such as Greyhounds and German Shepherds</p>
    <br> <br>

    <button style="height: 300px; width: 300px; display: block; margin: auto" class="button" 
    ng-class="{active : activeMenu === 'medFast'}" ng-click="activeMenu = 'medFast'; setSpeed()">
    <img height="220px" width="220px" src="images/greatDane.png" />
   </button>
    <h4>Medium/Fast (Avg Speed: 35km/h)</h4>
    <p>Includes dogs such as Great Danes and Pitbulls</p>
    <br> <br>

    <button style="height: 300px; width: 300px; display: block; margin: auto" class="button" 
    ng-class="{active : activeMenu === 'med'}" ng-click="activeMenu = 'med'; setSpeed()">
    <img style="padding-right: 25px" height="220px" width="220px" src="images/husky.png" />
   </button>
    <h4>Medium (Avg Speed: 30km/h)</h4>
    <p>Includes dogs such as Giant Schnauzers and Siberian Huskies</p>
    <br> <br>

    <button style="height: 300px; width: 300px; display: block; margin: auto" class="button" 
    ng-class="{active : activeMenu === 'medSlow'}" ng-click="activeMenu = 'medSlow'; setSpeed()">
    <img height="220px" width="220px" src="images/golden.png" />
   </button>
    <h4>Medium/Slow (Avg Speed: 23km/h)</h4>
    <p>Includes dogs such as Golden Retrievers and Dachshunds</p>
    <br> <br>

    <button style="height: 300px; width: 300px; display: block; margin: auto" class="button" 
    ng-class="{active : activeMenu === 'slow'}" ng-click="activeMenu = 'slow'; setSpeed()">
    <img style="padding-left: 25px" height="220px" width="220px" src="images/cat.png" />
   </button>
    <h4>Slow (Avg Speed: 12km/h)</h4>
    <p>Includes cast as well as dogs such as Basset Hounds and Bulldogs</p>
    <br> <br>
</div>

Controller:

.controller('PetCtrl', ["$scope", "$log", "$location", function ($scope, $log, $location) {
    $scope.title1 = 'Button';
    $scope.title4 = 'Warn';
    $scope.isDisabled = true;


    $scope.activeMenu = '';

    $scope.checkSpeedSet = false;

    $scope.setSpeed = function () {
        if ($scope.activeMenu == 'fast') {
            $scope.speed = 46;
            //alert(speed);
        }

        else if ($scope.activeMenu == 'medFast') {
            $scope.speed = 35;
        }

        else if ($scope.activeMenu == 'medium') {
            $scope.speed = 30;
        }

        else if ($scope.activeMenu == 'medSlow') {
            $scope.speed = 23;
        }

        else if ($scope.activeMenu == 'slow') {
            $scope.speed = 12;
        }

        $log.debug($scope.speed);
        $log.debug($scope.checkSpeedSet);
        $scope.checkSpeedSet = true;
        $log.debug($scope.checkSpeedSet);
        return $scope.speed;
    }

    function goToGetLocation() {
        alert('Function called');
        //$location.url($location.path() + "/" + speed + "/getLocation" );
        //location.reload();
    }
} ]);

Sajeetharan · Accepted Answer · 2016-10-11 02:06:22Z

2

You need to change the function inside the controller like this,

$scope.goToGetLocation = function(){
 alert('Function called');
}

Also remove ng-disabled from the html

<md-button ng-click="goToGetLocation()" sticky class="md-raised md-primary">Next</md-button>

edited Oct 11, 2016 at 2:06

answered Oct 11, 2016 at 2:01

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tom Over a year ago

Awesome thanks, I will accept the answer as soon as i can. Can you tell me the difference between what I had and your solution? It seems like either way the function should be called

Sajeetharan Over a year ago

@Tom In angular when you are using controller you should have a fucntion defined with the scope, otherwise it can't find

Collectives™ on Stack Overflow

AngularJS: Function not being called on ng-click

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related