Angular를 안전하게 청소하는 방법지시문의 JS 이벤트 바인딩

Angular를 안전하게 청소하는 방법지시문의 JS 이벤트 바인딩

요소의 높이를 브라우저 창의 안쪽 높이(+/- 주어진 오프셋)와 동일하게 설정하는 Angular 지시문이 있습니다.이 지침은 윈도우의 "크기 조정" 이벤트에 응답하고 그에 따라 윈도우의 높이를 조정합니다.지시문의 범위가 '$destory' 이벤트를 발생시키면 'resize' 이벤트에 대한 구속력을 제거합니다(제대로 두면 문제가 생길 것 같아요, 틀리면 수정해주세요).

저는 이 이벤트 분리를 어떻게 "안전한" 방법으로 할 수 있는지 모릅니다.앱 전체에 이 지침의 인스턴스가 여러 개 있고 '크기 조정' 이벤트에 첨부된 다른 지침이 있으면 어떻게 합니까?

JQuery는 이벤트 네임스페이스라는 개념을 가지고 있어 좋은 솔루션처럼 보이지만 Angular의 구현(JQLite)에서는 이를 지원하지 않습니다.저는 이미 앵글을 사용하고 있기 때문에 JQuery를 사용하고 싶지 않은데 어떻게 해야 하나요?

오늘날과 같이 내 지시에 대한 코드는 다음과 같습니다.

window.angular.module('arcFillClient', [])
    .directive('arcFillClientY', ['$window',
        function ($window) {

            function link($scope, el, attrs) {

                var setHeight,
                    onResize,
                    cleanUp;

                setHeight = function (offSetY) {
                    var newHeight;
                    offSetY = offSetY || 0;
                    newHeight = Math.max($window.innerHeight + parseInt(offSetY, 10)) + 'px';
                    el.height(newHeight);
                };

                onResize = function () {
                    var offset;
                    offset = attrs.arcFillClientY || 0;
                    setHeight(offset);
                };

                attrs.$observe('arcFillClientY', setHeight);
                window.angular.element($window).on('resize', onResize);

                cleanUp = function () {
                    window.angular.element($window).off('resize');
                };

                $scope.$on('$destroy', cleanUp);
            }
            return {
                link: link
            };

업데이트 RTFM 사례처럼 보이지만 다른 사람이 여기서 방황할 경우를 대비하여 여기에 추가 정보가 있습니다.원래 기능 전달하기 (나의 경우OnResize)로.off()범위를 분리하기 위해 노력합니다..off()기능.문서에서:

핸들러 인수에 함수 이름을 지정하여 핸들러를 제거할 수도 있습니다.jQuery가 {ahem}을 때...JQLite}은(는) 이벤트 핸들러를 연결하고 핸들러 함수에 고유 ID를 할당합니다.

여기 최신 정보가 있습니다.cleanUp내 지시에 따라 기능합니다.

cleanUp = function () {
    window.angular.element($window).off('resize', onResize);
};

감사합니다.ATT, 카롤리스, 한스의 공로를 치하합니다.

동일한 기능 참조 전달off할 때마다on:

window.angular.element($window).off('resize', onResize);

대신:

window.angular.element($window).off('resize');

데모 - 꺼짐에 대한 기능 참조 전달: http://plnkr.co/edit/1rfVPNXl6TrEcuYvzPAj?p=preview

데모 - 꺼짐: http://plnkr.co/edit/IsLqSLAzNcHqDnhMty7Q?p=preview 에 대한 기능 참조를 전달하지 않습니다.

데모에는 창 크기 조정 이벤트 듣기 두 가지 지시문이 모두 포함되어 있습니다.코드와 미리보기 사이의 세로 구분자를 사용하여 이벤트를 트리거합니다.

기능을 꺼짐으로 전환할 때 하나를 파괴해도 다른 하나가 계속 작동한다는 것을 알 수 있습니다.그렇지 않으면 둘 다 일을 그만두게 됩니다.

몇 주 전에도 똑같은 질문이 있었습니다.

jqLite 소스(https://github.com/angular/angular.js/blob/master/src/jqLite.js), 를 조사한 결과,onmethod는 이벤트를 추가하고,off메소드는 이벤트를 제거합니다.jqLiteOff기능.

더 깊이 들여다보면jqLiteRemoveData부름jqLiteOff.jqLiteRemoveData부름을 받습니다.jqLiteDealoc.jqLiteDealoc몇 곳에서 호출됩니다.jqLiteEmpty,html,replaceWith,그리고.remove.jqLiteEmpty요소에 할당됩니다.empty: 다.html,replaceWith그리고.remove.jQuery는 흉내를 냅니다.

어디에 있는지 검색하는 중remove()요소에서 호출되며, 전부는 아니더라도 대부분의 DOM 조작 로직에서 사용됩니다.안에서 보실 수 있습니다.ngIf,ngSwitch,ngInclude그리고.ngView.

그래서 당신이 jqLite를 사용하여 이벤트를 첨부하고 호출하는 한 Angular는 이벤트 청취자 정리를 처리한다고 생각합니다.remove()자신의 DOM 조작 논리에 적합합니다.jQuery를 사용하여 요소를 랩하는 것은 이벤트 청취자 정리를 포함한 많은 프로세스를 엉망으로 만들 것입니다. 하지만 사용 중이므로 이미 충분히 알고 있을 것입니다.angular.element.

일단 JQuery와 Angular를 사용하는 것은 전혀 문제가 없습니다.JS끼리.

그건 차치하고, 제가 좋아하는 것은.body듣는 지시window.on('resize', ...)크기를 에 적습니다.$rootScope.windowSize. 그럼 그 요소에 대한 다른 지시를 받아보세요.$watch("windowSize", ...)필요에 따라 폭으로 설정합니다.(실제로 크기를 노출할 필요는 없습니다.$scope- 대신 사용할 수 있습니다.require).

언급URL : https://stackoverflow.com/questions/23031381/how-to-safely-clean-up-angularjs-event-binding-in-a-directive