Question

我的浏览器中有一个输入字段，我的行为很奇怪。当我在开发人员控制台中检查它时，它看起来像这样：

<input type="text" name="siteName" ng-model="model.name" minlength="3"
       maxlength="40" ng-disabled="!model.isEditable || disableUpdate"
       required=""
       class="ng-pristine ng-untouched ng-empty ng-valid-namevalidation ng-invalid ng-invalid-required ng-valid-minlength ng-valid-maxlength">

呈现页面后，在chrome开发人员控制台中，我选择此输入字段，如下所示：

var x = document.querySelector('input[name="siteName"]')

，我在控制台中找到它。此输入字段在UI中有一个值（字符串，不能为空）-用angularjs的方式填充： ng-model =“ model.name” 。 model.name具有有效的字符串值。

当我在控制台中调用x.value时，我得到一个空字符串。

更多，在chrome开发者控制台中，当检查元素时，我可以使用$ 0访问它。 $ 0.value返回正确的值。

有人遇到这样的问题吗？知道如何使用查询选择器获取输入字段的值吗？

谢谢。

Answer 1

如果您尝试从chrome开发者控制台访问角度范围，

尝试angular.element(document.querySelector("<selectors>")).scope()

您可以在以下答案中获得有关此查询的更多信息

How do I access the $scope variable in browser's console using AngularJS?

Answer 2

当代码更改$ scope值时，AngularJS框架需要一个摘要周期来更新DOM，而浏览器则需要一个滴答声以呈现对DOM的更改。

使用$ timeout服务等待检查DOM元素：

app.controller("ctrl",function($scope, $timeout) {
     $scope.model = { name: "siteXXXX" };

     var x = document.querySelector('input[name="siteName"]');
     console.log("before ",x.value);  //undefined

     //ADD time to render
     $timeout(function() {
       console.log("after", x.value); //siteXXXX
     });
})

DEMO on PLNKR

有关更多信息，请参见

AngularJS $timeout Service API Reference

angularjs中输入字段绑定的值

2 个答案: