AngularJS作用域属性未定义

AngularJS scope property undefined

本文关键字：未定义 属性 作用域 AngularJS      更新时间：2023-09-26

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

有人能向我解释一下吗？我已经找了一段时间了，我被这一切弄糊涂了。此外，如果我在描述中对一些概念贴错了标签，如果你也能纠正我，我将不胜感激。

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

由于范围是Angular的中心，您应该看看https://docs.angularjs.org/guide/scope介绍如何使用作用域以及在使用指令时继承如何影响作用域。

这是因为您正试图将dom元素附加到一个未实例化的对象，请改为查看ng-bind。

之所以会发生这种情况，是因为在初始化控制器时，作用域中的username值尚未定义，并且您只打印初始值。这就是为什么您在第二个示例中得到了正确的值。看看这个：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)
})
}]);
相关文章：