Why does the function in the directive fire 2 times instead of 1?

Question

JavaScript

Hello!

There is a directive for changing the value of an input, but it works for changing not a specific input, but any other. Why is that?

Here is an example Example

Thanks in advance!

Answer 1

If you write like this in the directive, it only works when the required input changes

DirectivesApp.directive('calendarChange', ['$document', '$timeout', function($document, $timeout) {
        return {
            restrict: 'AE',
            link: function(scope, element, attrs) {
                $timeout(function() {
                    var $inputCalendar = document.getElementById('blockCalendar').getElementsByClassName('calendar_input');
                    angular.element($inputCalendar).on('change', function() {
                        console.log(scope.item);
                    });
                    /*$inputCalendar.on('change', function() {
                        console.log(scope.item);
                    });*/
                }, 500);
            }
        };
    }]);