html-ввод ng-директива не будет обновлять значение при изменении - PullRequest
0 голосов
/ 26 апреля 2018

Сначала позвольте мне объяснить контекст, прежде чем сказать, в чем проблема, у меня есть следующая функция в контроллере 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);

И когда какой-то элемент выбран, я получаю идентификатор, вызывающий функцию RespostaAutoComplete, отправляющую информацию через скрытый ввод, это функция, которая извлекает информацию:

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

Теперь параметры "codigo" - это идентификатор из списка, ранее отправленного функции, все работает нормально, если я работаю с этой переменной только в моем контроллере, проблем не возникает, но если я загружаю любую информацию в область действия, ограниченная директивой ng, html никогда не покажет, например:

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

И на HTML у меня есть такой ввод:

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

Переменная области видимости получает идентификатор без проблем, и я проверил, являются ли они неопределенными после этой функции, но она работает, она не показывает каких-либо ошибок или странного поведения при проверке, но входные данные просто не показывают информация в области, если она была загружена ТОЛЬКО в функцию после выбора автозаполнения, в другом месте работает отлично. И странное поведение, если в той же функции, где обновленная информация не отображается во входных данных html, есть метод GET по любой причине, буквально просто пустой метод get для любого случайного сервиса для любых целей, даже без использования ответа , ввод html обновляет информацию, как обычно:

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

Тогда по какой-то причине это работает, я понятия не имею, что происходит ...

...