0

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

<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 会返回正确的值。

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

谢谢你。

4

2 回答 2

1

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

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

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

如何使用 AngularJS 访问浏览器控制台中的 $scope 变量？

于 2019-08-04T11:38:07.077 回答
0

当代码更改 $scope 值时，AngularJS 框架需要一个摘要循环来更新 DOM，并且浏览器需要一个滴答声来呈现对 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
     });
})

PLNKR 上的DEMO

有关详细信息，请参阅

于 2019-08-01T16:49:37.150 回答