AngularJS：ng-clickで関数が呼び出されない

Question

ビューの上部でng-clickを使用して関数呼び出しがあり、関数はコントローラの下部に定義されています。 '次へ'ボタンをクリックすると、何らかの理由でgoToGetLocation（）関数が呼び出されません。ここで

は、Webページ/ビューです：http://alainwebdesign.ca/pl2/#/petType

ビュー：

<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('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(); 
    } 
} ]); 

Answer 1

あなたはこのようなコントローラ内部の機能を変更する必要があり、

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

また、ng-disabledをhtmlから削除してください

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