我在视图顶部使用ng-click进行函数调用,并在控制器的底部定义函数。当我点击下一个'按钮函数goToGetLocation()由于某种原因未被调用。
以下是网页/视图: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();
}
} ]);
答案 0 :(得分:2)
您需要像这样更改控制器内部的功能,
$scope.goToGetLocation = function(){
alert('Function called');
}
同时从html中删除ng-disabled
<md-button ng-click="goToGetLocation()" sticky class="md-raised md-primary">Next</md-button>