使用javascript .value在文本框ng-model中获取值

Question

我目前在使用jquery .value

尝试获取文本框内的值时感到困惑

<input class="input referral-code" disabled="true" ng-model="account.referral_code_string" id="input-refcode">

我尝试使用document.getElementById('input-refcode').value尝试获取值，但在我的控制台上显示为空。

但如果我尝试将其绑定到on-click事件，它会设法获取存储在ng-model

中的值

$('.trigger').on('click', function(){
   console.log(document.getElementbyId('input-refcode'))
});

正如您所看到的，文本框内部有一个值。但是当你尝试检查它时，就会出现这种情况。

<input class="input referral-code" disabled="true" ng-model="account.referral_code_string" id="input-refcode">

如果你看一下value内没有input textbox。我不确定它是否与angular.js

有关

Answer 1

您可以使用元素

获取scope对象

var scope =  angular.element(document.getElementById('input-refcode')).scope();
var desiredValue = scope.account.referral_code_string;

Answer 2

这可能会对你有帮助。

在控制器中注入$ timeout服务

$timeout(function(){
 console.log(document.getElementById('input-refcode')); },200);

注意：在getElementById中使用大写字母B而不是getElementbyId。

Answer 3

var app = angular.module('todoApp', []);
app.controller('TodoListController', function($scope){

        $scope.$watch('referral_code_string'), function(){ console.log($scope.referral_code_string)};
    
     console.log(document.getElementById('input-refcode').value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="todoApp" ng-controller="TodoListController as todoList">
<input class="input referral-code" disabled="true"  ng-model="referral_code_string"  ng-init="referral_code_string = 'abc'" id="input-refcode" value="abc">
</div>