读取 $scope 变量时获取未定义答案

【问题标题】：Get undefined when reading $scope variable读取 $scope 变量时获取未定义
【发布时间】：2025-12-06 17:30:01
【问题描述】：

我正在尝试在 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>

Angular JS

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

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

知道为什么我无法阅读 $scope.accessCode 吗？

【问题讨论】：

你做了这样的事情：angular.module('myApp.controllers', [])。 controller('SubscriptionCtrl', ['$scope', function ($scope) { // ... }); ??????
你能做一个jsFiddle或者codepen吗？
ng-model="subscription.accessCode";

标签： angularjs scope ng-controller

【解决方案1】：

您不必将代码恢复为使用$scope，因为使用控制器作为语法更好（See advantages）。您不仅要绑定 ng-model，还要绑定 ng-submit 到控制器实例 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>

【讨论】：

【解决方案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

希望对您有所帮助..！

【讨论】：

【解决方案3】：

我想你忘了用ng-model添加控制器as部分，因为你用过：

ng-controller="SubscriptionCtrl as subscription"

因此，在您的 ng-model 中，您必须使用：

ng-model="subscription.accessCode"

还将ng-submit="redeem()" 更改为 ng-submit="subscription.redeem()"

因此，HTML 部分将如下所示：

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

在控制器端实现如下：

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

【讨论】：

我如何在我的函数中访问它？ $scope.accessCode?
访问码没问题。 $scope.redeem = function (collectionId) { console.log($scope.accessCode); ... };
必须定义控制器，如 angular.module('myApp.controllers', [])。 controller('SubscriptionCtrl', ['$scope', function ($scope) { // ... }); ?
我已经定义了控制器，但为简单起见将其省略。对不起:-)