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

Question

我想要浏览器控制台中的 $scope.variable 值，但它总是出现未定义。

表单.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 。如果您的输入在 DOM 层次结构中“更深”不止一个范围，那么您的 $scope.firstName和ng-model输入中变成两个自变量，所以难怪你会得到 $scope.firstName不明确的。这是简单类型和范围继承的典型问题。解决这个问题的可能方法是:

• 使用对象在 Controller 和模板之间绑定(bind)数据:$ctrl.user.firstName和<input ng-model="user.firstName" >.
• 使用“controllerAs”语法。

在 controllers 的文档中了解更多相关信息和 scopes .