How to access a variable in a controller function?

Question

I'd like to be able to access a controller variable inside a function of this controller.

Why is the following code throwing an error into the console instead of showing the input value ?

JS:

var app = angular.module("app", []);

app.controller("TestCtrl", function($scope) {
    $scope.string = "";

    $scope.click = function() { // I've also tried with $scope in parameter
        console.debug(string); // and $scope.string here, same issue
    }
});

HTML :

<div ng-app="app" ng-controller="TestCtrl">
    <input type="text" ng-model="string"></input>
    <button ng-click="click()">Click me !</button>
</div>

JSFiddle

Simon H · Accepted Answer · 2014-09-27 16:13:05Z

2

remove $scope from the argument in you click function, and use it inside the function - see below and updated fiddle

app.controller("TestCtrl", function($scope) {
    $scope.string = "";

    $scope.click = function() {
        console.debug($scope.string);
    }
});

answered Sep 27, 2014 at 16:13

Simon H

21.2k14 gold badges84 silver badges144 bronze badges

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

Comments

Taras Kostiuk · Accepted Answer · 2014-09-27 16:39:30Z

0

You can try another approach:

app.controller("TestCtrl", function($scope) {
    this.string = "";
    var that = this;
    $scope.click = function() {
        console.debug(that.string);
    }
});

See on JSFiddle:

http://jsfiddle.net/qn47syd2/

answered Sep 27, 2014 at 16:39

Taras Kostiuk

2111 silver badge4 bronze badges

Collectives™ on Stack Overflow

How to access a variable in a controller function?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related