CODEWITHSUNDEEP
angularjs
Saras Arya
Saras Arya

Reputation: 3112

How to use ng-click variables in my controller?

I have a directive which looks something like this 

 <a href ng-click="metric='Distance'; metricshow=false;" >
 <a href ng-click="metric='Time'; metricshow=false;">

Now In my controller. 

console.log($scope.metric);
    switch($scope.metric)
    {
        case 'Distance' : console.log('Distance');
        break;
        case 'Time' : console.log('Time');
        break;
    }

The console.log() gives me undefined. Why?

Upvotes: 1

Views: 1094

Answers (4)

diegoaguilar
diegoaguilar

Reputation: 8376

So, right as other answers tell, it's because that console.log is being executed right away.

I'd like to tell a few extra points:

  1. It's better to use functions with ng-click instead of inline js code.
  2. At HTML you can use {{variable}} for $scope interpolation.
  3. There are $watch functions available.

$scope interpolation

So $scope is a glue between you controller and your JS code at controllers. You don't need to place {{$scope.variable}} because $scope becomes the global variable at markup.

This works great for app logic, useful when using ng-repeat, for example or just for fast debugging.

$watch functions

You could have, at your controller:

$scope.$watch('metric', function(newValue, oldValue){
  console.log("$scope.metric just changed from " + oldValue + " to " + newValue);
});

This is really useful for more sofisticated app logic, workflow and control. But you shouldn't do it for debugging.

About your question at last comment on what's being executed first, please check the docs on data binding and digest cycle.

Upvotes: 2

Rodmentou
Rodmentou

Reputation: 1640

When your controller first run, the $scope.metric variable was not created nor assigned to anything. You may also prefer not to use logic in your view, use functions instead.

Directive:

 <a href ng-click="setMetric('Distance')" >
 <a href ng-click="setMetric('Time')">

 <a href ng-click="getMetric()">

Now In your controller:

$scope.setMetric = function (type) {
  $scope.metric = type;
}

$scope.getMetric = function () {
  console.log($scope.metric);
}

Working Plunker with some additions

Upvotes: 1

Taiwei Tuan
Taiwei Tuan

Reputation: 1122

Late to the party, but according to your original code, I have created the similar situation.

 <a href ng-click="metric('Distance')" >
 <a href ng-click="metric('Time');">



 <script>
    $scope.metric = function(_parm){
        switch(_parm){
            case 'Distance': 
                console.log('Distance');
                $scope.metricshow = false;
                break;
            case 'Time' :
                console.log('Time');
                $scope.metricshow = false;
                break;
        }
    }
 </script>

For your reference, use ng-click to call function, THEN change the variables there. More readable, prettier on HTML side!

Upvotes: 1

Fridjon Gudjohnsen
Fridjon Gudjohnsen

Reputation: 827

You have not assigned anything to the $scope.metric when the controller is created therefore it console logs undefined.

Now, if you had something like:

<a href ng-click="doSomething()" >

in your HTML and something like:

$scope.doSomething = function() {
    $scope.metric='Distance'; 
    $scope.metricshow=false;
    console.log($scope.metric);
}

in your controller, you would be responding to the ng-click.

Upvotes: 2

Related Questions