Tom Tom - 1 month ago 12
AngularJS Question

Adding "$location" in controller dependencies array stops ng-click from working

I have a button with a ng-click call that worked before I injected "$location" in my controller array of dependencies. The function 'goToGetLocation()' is called at the very top of petType.html, and the function is defined at the bottom of the controller. You can see here that none of my buttons are calling any functions: http://alainwebdesign.ca/pl2/#/petType

Controller for petType.html:

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


$scope.activeMenu = '';

var speed;

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

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

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

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

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

$log.debug(speed);
return speed;
}

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


petType.html:

<md-button ng-disabled="setSpeed() == null" ng-click="goToGetLocation()" 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 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>


I have a very similar controller and view that IS working:

view: http://alainwebdesign.ca/pl2/#/100/getLocation

Controller:

.controller('MapsCtrl', ['$scope', "uiGmapLogger", "uiGmapGoogleMapApi", "$interval", "$state", "$stateParams",
function ($scope, $log, GoogleMapApi, $interval, $state, $stateParams) {
$log.currentLevel = $log.LEVELS.debug;
var center = { latitude: parseFloat($stateParams.lat), longitude: parseFloat($stateParams.lon) };
//alert(JSON.stringify(center));
Object.freeze(center); //caused TypeError: Cannot assign to read only property ('latitude') ...

console.log($stateParams);

$scope.map = {
center: center,
pan: false,
zoom: 16,
refresh: false,
events: {},
bounds: {}
};

$scope.map.circle = {
id: 1,
center: center,
radius: 500, //(current time - date lost)*km/hour
stroke: {
color: '#08B21F',
weight: 2,
opacity: 1
},

fill: {
color: '#08B21F',
opacity: 0.5
},
geodesic: false, // optional: defaults to false
draggable: false, // optional: defaults to false
clickable: true, // optional: defaults to true
editable: false, // optional: defaults to false
visible: true, // optional: defaults to true
events: {
dblclick: function () {
$log.debug("circle dblclick");
},
radius_changed: function (gObject) {
var radius = gObject.getRadius();
$log.debug("circle radius radius_changed " + radius);
}
}
}

//Increase Radius:
$interval(function () {
$scope.map.circle.radius += parseFloat($stateParams.speed); //dynamic var
}, 1000); //end of interval function


} ]) //end of controller

Answer

Your dependency array is incomplete. It should have as many string params as function arguments and in same order

Change

.controller('PetCtrl',["$location", function ($scope, $log, $location) {

To

.controller('PetCtrl',["$scope", "$log", "$location", function ($scope, $log, $location) {