读取 $scope 变量时得到 undefined

Question

我试图在 Angular (1.6.8) 函数中读取我表单中的变量 accessCode 但我只得到 undefined.

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>

AngularJS

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

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

为什么我看不懂 $scope.accessCode？

Answer 1

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);
  };
}]);

Answer 2

试试这个..

可能在 html 中遗漏了 module 个名字。

在app.js中：

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

而不是使用 as .

直接将$scope注入控制器

在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>

关注ng-controller

希望对您有所帮助..！

Answer 3

您不必将代码恢复为使用 $scope，因为使用控制器作为语法更好 ()。您不仅必须将您的 ng-model 绑定到您的控制器实例 subscription.

，还必须将您的 ng-submit 绑定

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>

读取 $scope 变量时得到 undefined

Get undefined when reading $scope variable

scope

angularjs

ng-controller