输入字段绑定的值 angularjs

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 开发者控制台中，我 select 这个输入字段是这样的：

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

我在控制台中得到了它。此输入字段在 UI 中有一个值（一个字符串，不为空） - 由 angularjs 以这种方式填充： ng-model="model.name". model.name 具有有效的字符串值。

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

此外，在 chrome 开发者控制台中，当检查一个元素时，我可以使用 $0 访问它。 $0.value returns 给我正确的值。

有人遇到过这样的问题吗？知道如何使用查询 select 或输入字段的值吗？

谢谢。

Answer 1

当代码更改 $scope 值时，AngularJS 框架需要一个摘要周期来更新 DOM，并且浏览器需要一个 tick 来呈现对 DOM 的更改。

在检查 DOM 个元素之前使用 $timeout 服务等待：

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

Answer 2

如果您尝试从 chrome 开发人员控制台访问 angular 范围，

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

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

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

输入字段绑定的值 angularjs

value of input field bind in angularjs

angularjs

queryselector