Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/391.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何在AngularJS中创建并聚焦新元素?_Javascript_Jquery_Html_Angularjs_Events - Fatal编程技术网

Javascript 如何在AngularJS中创建并聚焦新元素?

Javascript 如何在AngularJS中创建并聚焦新元素?,javascript,jquery,html,angularjs,events,Javascript,Jquery,Html,Angularjs,Events,我有一个由AngularJS控制的具有动态输入数量的表单 <body ng-app="mainApp" ng-controller="CreatePollController" ng-init="init(3)"> <form id="createPollForm"> <input class="create-input" ng-repeat="n in questions" id="q_{{$index}}" name="q_{{$inde

我有一个由AngularJS控制的具有动态输入数量的表单

<body ng-app="mainApp" ng-controller="CreatePollController" ng-init="init(3)">
    <form id="createPollForm">
        <input class="create-input" ng-repeat="n in questions" id="q_{{$index}}" name="q_{{$index}}" type="text" ng-keypress="createInputKeypress($event);"/>
        <a href="javascript:void(0);" ng-click="addQuestion()">Add Question</a>
    </form>
</body>

这由以下角度代码控制:

app.controller('CreatePollController', function($scope) {
    $scope.questions = [];

    $scope.init = function(numOfInputs){
        for(var i = 0; i < numOfInputs; i++){
            $scope.questions.push({
                "questionText":""
            });
        }
    };

    $scope.addQuestion = function(){
        $scope.questions.push({
            "questionText":""
        });
    };

    $scope.createInputKeypress = function(e){
        if(e.keyCode === 13){
            e.preventDefault();

            var idx = Number(e.target.id.replace("q_", ""));
            if(idx === this.questions.length - 1){
                this.addQuestion();
            }

            // Wait for angular update ????

            var nextId = "#q_" + (++idx);
            $(nextId).focus();
        }
    };
});
app.controller('CreatePollController',函数($scope){
$scope.questions=[];
$scope.init=函数(numOfInputs){
对于(变量i=0;i
当前,当用户在关注文本输入时按Enter键时,将调用createInputKeypress函数,浏览器将关注表单中的下一个输入。但是,如果您当前关注表单中的最后一个元素,它会向
questions
数组中添加一个新问题,这将导致在DOM中生成另一个输入

但是,创建新元素时,focus()调用不起作用。我怀疑这是因为angular没有立即添加新元素,所以尝试使用jQuery来定位和聚焦新元素是行不通的


有没有一种方法可以等待DOM更新,然后关注新元素?

正如您可能已经知道的,javascript是基于回合的,这意味着浏览器将轮流(循环)执行JS代码。目前,在下一个javascript周期中准备回调的方法是使用我们希望在超时后在下一个周期中运行的代码设置回调,我们可以通过以
0
毫秒的间隔调用来实现,这将强制在浏览器完成后的下一个javascript周期中调用给定的回调(从)当前的一个

为了保持简单,一个浏览器周期按给定顺序执行这些操作:

  • 脚本(发生JS转换的地方)
  • 渲染(HTML和DOM渲染)
  • 绘制(在窗口中绘制渲染的DOM)
  • 其他(内部浏览器的东西)
  • 看看这个例子:

    console.log(1);
    控制台日志(2);
    setTimeout(函数(){
    控制台日志(3);
    控制台日志(4);
    }, 0);
    控制台日志(5);
    控制台日志(6);
    /**在控制台中打印
    *1-在当前JS回合中
    *2-在当前的JS回合中
    *5-在当前的JS回合中
    *6-在当前的JS回合中
    *3-在下一轮中
    *4-在下一轮中
    **/