Question

我想在浏览器控制台中使用$scope.variable值，但它始终是未定义的。

form.htm

<form>
<p>First Name: <input type="text" name="firstName" ng-model="firstName" 
required /></p>

<button ng-click="SendData()">Submit</button>
</form>

myctr.js

app.controller('myCtrl', ['$scope', '$http', 'ngCart', '$localStorage',
 '$sessionStorage', '$window',
 function($scope, $http, ngCart, $localStorage,
     $sessionStorage, $window) {
     $scope.SendData = function() {
         console.log($scope.firstName)
         $window.alert($scope.firstName)
     };
 }
]);

Answer 1

可能的问题是您使用的是简单的字符串值$scope.firstName。如果您的输入是多个范围＆＃34;更深层次＆＃34;在DOM层次结构中，输入中的$scope.firstName和ng-model变为两个独立变量，因此难怪你得到$scope.firstName未定义。这是简单类型和范围继承的典型问题。解决这个问题的可能方法是：

使用object在控制器和模板之间绑定数据：$ctrl.user.firstName和<input ng-model="user.firstName"＆gt;。
使用＆＃34; controllerAs＆＃34;句法。

在controllers和scopes的文档中详细了解。

Answer 2

使用以下修改后的代码---

var app = angular.module('myApp', ['ngStorage']);
app.controller('myCtrl', function($scope, $window,$http,$localStorage,$sessionStorage) {
    $scope.SendData = function() {
    console.log($scope.firstName)
    $window.alert($scope.firstName)
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdn.jsdelivr.net/ngstorage/0.3.6/ngStorage.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<form>
<p>First Name: <input type="text" name="firstName" ng-model="firstName" 
required /></p>

<button ng-click="SendData()">Submit</button>
</form> 
</div>

修改了答案......

Answer 3

根据 ngModel 的定义，它将尝试通过评估当前范围上的表达式绑定到给定的属性。如果该范围内的属性尚未存在，则将隐式创建该属性并将其添加到范围中。

这里点击提交时没有填写文本框$ scope.firstName是未定义的，因为firstName没有在当前的$ scope中定义。

如果在文本框中输入了某些内容，则根据ng-model的定义，将隐式创建firstName属性并将其添加到范围中。

让控制器

app.controller('MainCtrl', function($scope) {

  $scope.lastName=''; 

  $scope.SendData = function() {
    console.log($scope.firstName)
    alert($scope.firstName)
    };

    $scope.CheckLast = function() {
    console.log($scope.lastName)
    alert($scope.lastName)
    };

});

HTML

  <body ng-controller="MainCtrl">
    <form>
<p>First Name: <input type="text" name="firstName" ng-model="firstName"/></p>
<button ng-click="SendData()">Submit</button>
<p>Last Name: <input type="text" name="lastName" ng-model="lastName"/></p>
<button ng-click="CheckLast()">Submit</button>
</form>
</body>

这里Demo plunker你可以看到firstName是未定义的，而lastName不是在范围内初始化的姓氏。如果在提交之前将某些内容填充到firstName文本框，则会定义它。

表单提交AngularJs时，浏览器控制台中未定义$ scope.variable

3 个答案: