html输入ng-directive不会更新更新值

时间:2018-04-26 18:26:46

标签: javascript html angularjs autocomplete undefined-behavior

首先让我在说出问题之前解释上下文,我在angularjs控制器中有以下功能:

$scope.autocomplete = function(input, lista) {

        var currentFocus;

        input.addEventListener("input", function (e) {
            var a, b, i, val = this.value;
            closeAllLists();
            if (!val) { return false; }
            currentFocus = -1;

            a = document.createElement("DIV");
            a.setAttribute("id", this.id + "autocomplete-list");
            a.setAttribute("class", "autocomplete-items");

            this.parentNode.appendChild(a);
            for (i = 0; i < lista.length; i++) {
                var nomeItem = lista[i].nome;
                var codigoItem = lista[i].codigo;

                var itemLista = nomeItem.toUpperCase();
                var inputTexto = val.toUpperCase();
                if (itemLista.includes(inputTexto)) {

                    b = document.createElement("DIV");

                    var quantidadeDeLetras = 0;
                    var inicio = "", meio = "", fim = "", contarLetras = "";
                    for (var contador = 0; contador < nomeItem.length; contador++) {
                        var parteNome = nomeItem.substr(contador, val.length);
                        if (contador > 0) {
                            inicio = nomeItem.substr(0, contador);
                        }
                        if (parteNome.toUpperCase() == val.toUpperCase()) {
                            meio = "<strong>" + parteNome + "</strong>";
                            break;
                        }
                    }
                    contarLetras = inicio + val;
                    quantidadeDeLetras = contarLetras.length;
                    fim = nomeItem.substr(quantidadeDeLetras);
                    b.innerHTML = inicio + meio + fim;

                    b.innerHTML += "<input type='hidden' name='" + codigoItem + "' value='" + nomeItem + "'>";

                    b.addEventListener("click", function (e) {
                        input.value = this.getElementsByTagName("input")[0].value;
                        $scope.RespostaAutocomplete(this.getElementsByTagName("input")[0].name);

                        closeAllLists();
                    });
                    a.appendChild(b);
                }
            }
        });

        input.addEventListener("keydown", function (e) {
            var x = document.getElementById(this.id + "autocomplete-list");
            if (x) x = x.getElementsByTagName("div");
            if (e.keyCode == 40) {
                currentFocus++;
                addActive(x);
            } else if (e.keyCode == 38) { //up

                currentFocus--;
                addActive(x);
            } else if (e.keyCode == 13) {

                e.preventDefault();
                if (currentFocus > -1) {
                    if (x) x[currentFocus].click();
                }
            }
        });
        function addActive(x) {
            if (!x) return false;
            removeActive(x);
            if (currentFocus >= x.length) currentFocus = 0;
            if (currentFocus < 0) currentFocus = (x.length - 1);
            x[currentFocus].classList.add("autocomplete-active");
        }
        function removeActive(x) {
            for (var i = 0; i < x.length; i++) {
                x[i].classList.remove("autocomplete-active");
            }
        }
        function closeAllLists(elmnt) {
            var x = document.getElementsByClassName("autocomplete-items");
            for (var i = 0; i < x.length; i++) {
                if (elmnt != x[i] && elmnt != input) {
                    x[i].parentNode.removeChild(x[i]);
                }
            }
        }
        document.addEventListener("click", function (e) {
            closeAllLists(e.target);
        });
    }

它需要一个html输入和一个名称和id作为参数的对象列表来创建一个自动完成输入,它没有问题,我这样称呼它:

$scope.autocomplete(document.getElementById("autocompleteInput"), $scope.projetos);

当选择某个项目时,我检索id调用一个名为RespostaAutoComplete的函数,通过隐藏输入发送信息,这是检索信息的函数:

 $scope.RespostaAutocomplete = function (codigo) {
        //*do stuff here*
    };

现在,&#34; codigo&#34;参数是先前发送给函数的列表中的id,一切正常,如果我只在我的控制器中使用该变量,没有问题,但是如果我将任何信息加载到以ng-directive为界的范围内,html永远不会表现出来,例如:

$scope.RespostaAutocomplete = function (codigo) {
        $scope.idYouJustSelected = codigo;
    };

在html上我有这样的输入:

<input class="form-control " id="test" type="text" ng-model="idYouJustSelected" >

范围变量获得id没有问题,我测试了它们是否在该功能之后未定义但是它有效,它没有显示任何类型的错误或奇怪的检查行为,但是输入刚赢了&#39 ; t显示范围内的信息,如果在选择自动完成输入后仅在函数中加载,其他任何地方都可以正常工作。 并且一个奇怪的行为是,如果在html输入中未显示更新信息的同一函数中出于任何原因具有GET方法,实际上只是用于任何目的的任何随机服务的空get方法,甚至不使用响应,html输入正常更新信息,如:

$scope.RespostaAutocomplete = function (codigo) {
         $http.get(__ambiente.apiUrl + 'randomservice')
           .then (
                function (resposta) {
                },
                function (error) {
                });
        $scope.idYouJustSelected = codigo;
    };

然后,出于某种原因,它有效,我不知道发生了什么......

0 个答案:

没有答案
相关问题