等待执行功能，直到新的数据反映在浏览器中

Wait to perform function until new data is reflected within the browser

本文关键字：数据 浏览器 功能 执行 等待      更新时间：2023-09-26

我有具有Id属性的Answer对象，该属性也用于ng-repeat内的HTML标记中的Id标记。

<div ng-repeat="answerswer in question.Answers">
    <div class="input-group">
        <div class="input-group-addon">
            <input type="number" style="width:40px" ng-model="answerswer.AnswerOrder"/>
        </div>
        <input type="text" class="form-control" id="answerswer-{{answer.Id}}"placeholder="Question Text" ng-model="answerswer.AnswerText"/>
    </div>
</div>
<div class="input-group">
        <div class="input-group-addon"><input type="number" style="width:40px" ng-model="answerswer.AnswerOrder" disabled/></div>
        <input type="text" class="form-control" placeholder="Click to add answer" ng-click="addAnswerToQuestion(question)"/>
</div>

当用户点击输入"点击添加答案"时，它运行addAnswerToQuestion(question)方法，这是我的控制器中的以下内容:

var newQuestionCounter = 0;
$scope.addAnswerToQuestion = function (question) {
    newQuestionCounter++;
    question.Answers.push({
        Id: ('n'+newQuestionCounter),
        AnswerText: '',
        IsCorrect: false,
        AnswerOrder: 0,
        QuestionId: question.Id
    });
    document.getElementById('answer-n' + newQuestionCounter).focus();
}

这个想法是给你一种错觉，你仍然在同一个元素上，但实际上"点击添加答案"元素没有被修改，你的焦点只是默默地切换到新的Answer。

问题是document.getElementById在数据绑定之前被调用，ng-repeat被更新。所以document.getElementById没有找到元素

我如何等待所有双向数据绑定完成，或者是否有更好的方法来完成我正在尝试做的事情?

就我个人而言，在我做这样的事情之前，我会重新考虑UX，但是您可以使用$timeout服务来完成这一点。一个经验法则是，$timeout总是出现在$digest()的一个完整循环之后。

$timeout(function() {
  document.getElementById('answer-n' + newQuestionCounter).focus();
}, 1);
http://plnkr.co/edit/0LnMBv6DqUjFrcmqd0v3

相关文章：