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

0

コードが $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
     });
})

PLNKRのデモ

詳細については、次を参照してください。

于 2019-08-01T16:49:37.150 に答える