Get undefined when reading $scope variable

Question

I'm trying to read the variable accessCode in my form in a Angular (1.6.8) function but I only get undefined.

The HTML

<form ng-submit="redeem()" ng-controller="SubscriptionCtrl as subscription">
   <input class="text-uppercase" type="number" ng-maxlength="6" placeholder="Indtast kode" ng-model="accessCode" />
   <input type="submit" class="btn btn-dark-green" value="Indløs" />
</form>

The Angular JS

app.controller('SubscriptionCtrl', ['$scope', '$http', '$templateCache',
    function ($scope, $http, $templateCache) {

$scope.redeem = function () {
    console.log($scope.accessCode);
};
}]);

Any ideas why I can't read $scope.accessCode?

You did something like this: angular.module('myApp.controllers', []). controller('SubscriptionCtrl ', ['$scope', function ($scope) { // ... }); ???? — Pierpaolo Di Dato, Feb 26 '18 at 09:08

score 2 · Accepted Answer · answered Feb 26 '18 at 09:54

You don't have to revert your code back to using $scope since using controller as syntax is better (See advantages). You have to bind not only your ng-model but also your ng-submit to your controller instance subscription.

var app = angular.module('myApp', [])
app.controller('SubscriptionCtrl',
    function() {
        var subscription = this;
        subscription.redeem = function() {
            console.log(subscription.accessCode)
        }
    })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="SubscriptionCtrl as subscription">
        <form ng-submit="subscription.redeem()">
            <input class="text-uppercase" type="number" ng-maxlength="6" placeholder="Indtast kode" ng-model="subscription.accessCode" />
            <input type="submit" class="btn btn-dark-green" value="Indløs" />
        </form>
    </div>
</div>

I. Ahmed · Answer 2 · 2018-02-26T10:02:59.153

0

I think you forget to add the controller as section with ng-model, because you used:

ng-controller="SubscriptionCtrl as subscription"

So, in your ng-model, you have to use:

ng-model="subscription.accessCode"

Also change ng-submit="redeem()" to ng-submit="subscription.redeem()"

So, the HTML section will be as follows:

    <form ng-submit="subscription.redeem()" ng-controller="SubscriptionCtrl as subscription">
       <input class="text-uppercase" type="number" ng-maxlength="6" placeholder="Indtast kode" ng-model="subscription.accessCode" />
       <input type="submit" class="btn btn-dark-green" value="Indløs" />
    </form>

In controller side implement as follows:

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

//registering the above controller to the module
app.controller("SubscriptionCtrl",['$scope',function ($scope){
  $scope.accessCode = "";
    $scope.redeem = function () {
    console.log($scope.accessCode);
  };
}]);

edited Feb 26 '18 at 10:02

answered Feb 26 '18 at 09:08

I. Ahmed

2,438
1
12
29

And how do I access it in my function? $scope.accessCode? – Birger Püschl Feb 26 '18 at 09:23
Access code is ok. $scope.redeem = function (collectionId) { console.log($scope.accessCode); ... }; – I. Ahmed Feb 26 '18 at 09:31
Have to defined controller like angular.module('myApp.controllers', []). controller('SubscriptionCtrl ', ['$scope', function ($scope) { // ... }); ? – I. Ahmed Feb 26 '18 at 09:32
I have defined the controller but left it out for simplicity. Sorry :-) – Birger Püschl Feb 26 '18 at 09:37

score 0 · Answer 3 · answered Feb 26 '18 at 09:42

Try this ..

Might have missed module name in html.

In app.js :

    var app = angular.module('myApp', []);
    app.controller('SubscriptionCtrl', function($scope) {
       console.log($scope.accessCode);
              .....
    });

Instead of using as .

Directly inject the $scope into the controller.

In HTML:

<body ng-app="myApp">
    <form ng-submit="redeem(collection.Id)" ng-controller="SubscriptionCtrl">
       <input class="text-uppercase" type="number" ng-maxlength="6" placeholder="Indtast kode" ng-model="accessCode" />
       <input type="submit" class="btn btn-dark-green" value="Indløs" />
    </form>
</body>

Follow ng-controller

Hope it helps..!

Get undefined when reading $scope variable

3 Answers3