AngularJS 날짜 선택기가 onchange 이벤트를 여러 번 실행합니다.

StackOverflow https://stackoverflow.com//questions/24006142

문제

Angularjs에 적합한 날짜 선택기를 찾고 있었고 pickadate.js

http://amsul.ca/pickadate.js/

이 블로그 게시물에 표시된 대로 각도 통합을 허용하는 사용자 지정 지시문과 함께 아름다운 모바일 UI로 인해

http://www.codinginsight.com/angularjs-and-pickadate/

값이 변경될 때 컨트롤러에서 함수를 호출하는 이벤트를 사용하여 위 블로그 게시물의 지시문을 확장하고 싶었습니다.확장 지시문의 전체 코드는 다음과 같습니다.

angular.module('plunker').directive('pickADate', function () {
    return {
        restrict: "A",
        scope: {
            pickADate: '=',
            minDate: '=',
            maxDate: '=',
            change: '='
        },
        link: function (scope, element, attrs) {
            element.pickadate({
                onSet: function (e) {
                    if (scope.$$phase || scope.$root.$$phase) // we are coming from $watch or link setup
                        return;
                    var select = element.pickadate('picker').get('select'); // selected date
                    scope.$apply(function () {
                        if (e.hasOwnProperty('clear')) {
                            scope.pickADate = null;
                            return;
                        }
                        if (!scope.pickADate)
                            scope.pickADate = new Date(0);
                        scope.pickADate.setYear(select.obj.getFullYear());
                        // Interesting: getYear returns only since 1900. Use getFullYear instead.
                        // It took me half a day to figure that our. Ironically setYear()
                        // (not setFullYear, duh) accepts the actual year A.D.
                        // So as I got the $#%^ 114 and set it, guess what, I was transported to ancient Rome 114 A.D.
                        // That's it I'm done being a programmer, I'd rather go serve Emperor Trajan as a sex slave.
                        scope.pickADate.setMonth(select.obj.getMonth());
                        scope.pickADate.setDate(select.obj.getDate());
                    });
                },
                onClose: function () {
                    element.blur();
                }
            });
            function updateValue(newValue) {
                if (newValue) {
                    scope.pickADate = (newValue instanceof Date) ? newValue : new Date(newValue);
                    // needs to be in milliseconds
                    element.pickadate('picker').set('select', scope.pickADate.getTime());
                } else {
                    element.pickadate('picker').clear();
                    scope.pickADate = null;
                }
            }
            updateValue(scope.pickADate);
            element.pickadate('picker').set('min', scope.minDate ? scope.minDate : false);
            element.pickadate('picker').set('max', scope.maxDate ? scope.maxDate : false);
            scope.$watch('pickADate', function (newValue, oldValue) {
                if (newValue == oldValue)
                    return;
                updateValue(newValue);

                // call change function
                scope.change;
            }, true);
            scope.$watch('minDate', function (newValue, oldValue) {
                element.pickadate('picker').set('min', newValue ? newValue : false);
            }, true);
            scope.$watch('maxDate', function (newValue, oldValue) {
                element.pickadate('picker').set('max', newValue ? newValue : false);
            }, true);
        }
    };
});

이제 아래 HTML에 표시된 대로 변경 이벤트와 함께 이 지시어를 사용할 수 있습니다.

<input type="text" pick-a-date="curDate" change="onChange()" />

작동하지만 단일 변경에 대해 OnChange 이벤트가 여러 번 발생합니다.한 번만 발사할 수 있는 방법에 대한 아이디어가 있나요?문제를 보여주기 위해 플런커를 만들었습니다.

http://plnkr.co/edit/3NcaAknd4GpelJxHWUyv

텍스트 필드를 클릭하고 날짜를 선택하세요.단일 날짜 변경에 대해 카운터 변수가 여러 번 업데이트되는 것을 볼 수 있습니다.

도움이 되었습니까?

해결책

@miqid는 지시문과 컨트롤러간에 기능을 바인딩하는 것으로 제안되었으므로 '&' ('='는 지시문과 컨트롤러 간의 범위 변수를 바인딩하는 데만 사용해야합니다.)

또한 현재 코드로 수행 해야하는 하나의 변경이 하나 더 있습니다.updateValue()의 함수 scope.change는 범위로 참조 된 것으로 실행되지 않고 실행되지 않습니다.이것은 scope.change()로 변경되어야합니다.

나는 당신의 플럼 홀을 갈로 분리하고 위의 변화를 해결하기 위해 수정했습니다.

고정 작업 플러시 : http://plnkr.co/edit/oepoxe21dxre28fpkomc?p=preview

카운터가 변경되면 한 번만 업데이트됩니다.이것이 도움이되는지 알려주세요.

다른 팁

당신은 묶었습니다 change 너의 안에 pick-a-date 지시어 사용 '=' 대신에 '&'.

콜백 함수와 같은 표현식에는 후자의 격리 범위 바인딩이 권장됩니다.

AngularJS 문서의 관련 조언 지시어:

모범 사례: 사용 &attr 지시문이 동작에 바인딩하기 위해 API를 노출하도록 하려는 경우 범위 옵션에서.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top