@Banjamin
Пишу

Как правильно присвоить модели значение?

Коллеги, добрый день. Просьба подсказать решение.
Была дана задача, реализовать инпут который позволяет вводить только целочисленные значения.

Мой код:

<script>
        angular.module("App", [])
            .controller("defaultCtrl", function ($scope) {})
            .directive("checkNumber", function () {
                return function (scope, element, attributes) {
                    const number = element[0].value;
                    const numberAfter = attributes.checkNumber
                    scope.$watch('inputValue', function (newValue, oldValue) {
                        const limitNumber = function (newValue) {
                            if (newValue / Math.floor(newValue) != 1 && newValue != undefined) {
                                let result = Number.parseInt(newValue)
                                scope.inputValue = result
                            }
                        }
                        limitNumber(newValue)
                    })
                }
            })
    </script>
</head>
<body ng-controller='defaultCtrl'>
    <input type='number' value="{{inputValue}}" ng-model="inputValue" check-Number='0'>

</body>


Комментарий такой: внутри слушателя ты присваиваешь модели значений, однако в этот момент расчёт модели не завершен (digest - цикл), в виду чего происходит зацикливание (в таком случае лучше делать присваивание через timeout, при условии что новое значение слушателя не равно старому значению)
Т.к. я только в процессе изучения фреймворка, не понимаю все тонкости. Можете простым языком пояснить и подсказать пример решения. Заранее благодарен.
  • Вопрос задан
  • 59 просмотров
Решения вопроса 1
@alexkhismatulin
Это лучше делать немного по-другому - вместо того, чтобы слушать изменения scope, лучше привязаться к событию инпута и исходить уже из этого. Еще одним преимуществом привязки именно к события является то, что ты можешь отменить изменение до того, как произойдет рендер. В случае наблюдения за значением в scope ты в любом случа сделаешь 2 рендера инпута: сначала отрисуешь с недопустимым символом, а затем заменишь значение на допустимое(в примере на доли секунды появляется невалидное значение, а затем снова исчезает).
Насчёт таймаута - это один из способов применить апдейты к view части. Чтобы ангуляр отрисовал новое значение, ему нужно совершить digest цикл - то есть пройти по значениям и сравнить их. $timeout - один из безопасных способов это сделать, так как после отработки он запускает digest цикл.

Вот пример того, как это можно сделать.

В твоём примере директива не нужна - ты просто делаешь watch из котроллера и меняешь значение, если нужно.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы