控制器中未定义AngularJS-ng模型

Question

我正试图从控制器中读取ng模型，但我无法使其工作。它说ng模型是未定义的。我试图应用其他人提供的解决方案来解决这个类似的问题，但我仍然无法实现。也许是因为我做得不对。

我有以下代码片段：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.apply = function() {
$scope.name = {}
var firstName = $scope.name.FirstName;
alert(firstName);
}
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="apply()" type="button">Apply</button>
Name:
<input ng-model="name.FirstName">
</div>

然而，警报显示，单击"应用"按钮后，变量"firstName"未定义。因此，我尝试使用以下代码。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.apply = function() {
var theFirstname = "";
$scope.name = {
theFirstname: $scope.name.FirstName
}
alert(theFirstname);
}
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="apply()" type="button">Apply</button>
Name:
<input ng-model="name.FirstName">
</div>

然而，我似乎无法将$scope.name.FirstName分配给变量"Firstname"。

Answer 1

将name的初始化移动到apply()之上。

通过这样做，name.FirstName可以从Template初始化，因为name已经在scope上定义了。

在您的情况下，$scope.name={}是在处理程序中定义的，因此当ng-model附加到文本框时，name就是undefined。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
// Define the `name` object
$scope.name = {};
$scope.apply = function() {
var firstName = $scope.name.FirstName;
console.log(firstName);
};
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="apply()" type="button">Apply</button>
Name:
<input ng-model="name.FirstName">
</div>