Question

我是AngularJS的新手，我正在努力了解它如何管理范围。我可能在下面不恰当地描述了一些概念，但根据文档，$scope是一个引用应用程序模型的对象。如果我创建一个简单的HTML元素，如

<div data-ng-controller="MyController">       
 <input type="text" data-ng-model="username">     
</div>

其中指定data-ng-model指令并使用属性“username”填充“应用程序模型”（范围），我相信该属性是对HTML元素输入的引用。当我尝试在我的控制器代码中记录用户名的值时，我得到了未定义。为什么不定义？ AngularJS是否不创建变量“username”并将其添加到范围对象

我的控制器代码是这样的：

angular.module('scopeExample', [])
.controller('MyController', ['$scope', $log, function($scope, $log) {
 $log.log($scope.username) // produces undefined     
}]);

当我将username属性添加到控制器中的范围时，属性被定义并且没有问题，即

angular.module('scopeExample', [])
.controller('MyController', ['$scope', $log, function($scope, $log) {
$scope.username = ''; // no problem 
$log.log($scope.username) // produces undefined     
}]);

有人可以向我解释这个问题，我一直在寻找一段时间，我对此感到困惑。此外，如果我在说明中错误标记了一些概念，如果您也纠正我，我将不胜感激。

Answer 1

ng-model指令用于声明包含范围数据的Javascript对象。在这种情况下，您将其设置为名为username的对象。这是$scope变量将绑定的对象。这就是$scope.username未定义的原因。将$scope视为username的别名。这也是为什么如果您向username添加属性，则可以从$scope访问该属性。

由于范围是Angular的核心，因此您应该查看https://docs.angularjs.org/guide/scope，了解范围的使用方式以及继承在使用指令时如何影响它们。

Answer 2

这是因为您尝试将dom元素附加到非实例化对象，而是查看ng-bind。

Answer 3

发生这种情况是因为初始化控制器时尚未定义范围中用户名的值，并且您只打印初始值。这就是为什么你在第二个例子中得到正确的值。看看这个：http://jsfiddle.net/pratikfiddlejs/HB7LU/21096/

我已在用户名上附加了一条监视，因此每当它更改时，更改的值都将记录在控制台中

myApp.controller('MyController', ['$scope', '$log', function($scope, $log) {
$scope.$watch('username', function(newValue) {
if (newValue !== undefined)
  $log.log($scope.username)
})
}]);

AngularJS范围属性未定义

3 个答案: