Angular & AngularJS Hybrid mode - директива об понижении атрибута - PullRequest
Новая
       33

Angular & AngularJS Hybrid mode - директива об понижении атрибута

0 голосов
/ 20 декабря 2018

Я пытаюсь понизить эту директиву Angular до директивы AngularJS (мы используем Angular с AngularJS в гибридном режиме, и мы понижаем рейтинг только из-за проблем с производительностью) 

'use strict';

import * as _ from 'lodash';
import * as angular from 'angular';
import * as $ from 'jquery';
import {Directive, ElementRef, EventEmitter, Input, OnDestroy, Output} from '@angular/core';
import {downgradeComponent} from '@angular/upgrade/static';

@Directive({selector: '[gbClickOutside]'})
export class GbClickOutsideDirective implements OnDestroy {
    private readonly element;
    private readonly listener;

    @Output() gbClickOutside = new EventEmitter();
    @Input() whitelist;
    @Input() blacklist;
    @Input() parent;
    @Input() includeSelf;

    constructor(private el: ElementRef) {
        this.element = $(el.nativeElement);
        // const clickOutside = $parse(attrs.clickOutside);
        this.listener = this.onDocumentMouseDown.bind(this);

        $(document).on('mousedown.click_outside', this.listener);
    }

    onDocumentMouseDown(event) {
        const self = this;

        // An array of selectors. Any white-listed element will not trigger the click-outside event
        const whitelist = this.whitelist || [];

        // An array of selectors. Any black-listed element will trigger the click-outside event,
        // even if this element is contained within the main container
        const blacklist = this.blacklist || [];

        // Element to apply whitelist/blacklist on. if not set, whitelist/blacklist will be applied on the document
        const parent = this.parent;

        const isClickOutsideElement = targetElem => self.element.is(':visible') &&
            !targetElem.closest(self.element.children()).length &&
            (angular.isDefined(self.includeSelf) || !targetElem.is(self.element));

        const isClickElementsInList = (targetElem, selectors) => !_.isEmpty(selectors) &&
            selectors.some(selector => (!parent || parent.contains(targetElem.get(0))) &&
                (targetElem.is(selector) || targetElem.closest($(selector).children()).length));

        const isClickOutsideWhitelistElement = targetElem => !isClickElementsInList(targetElem, whitelist);
        const isClickBlacklistElement = targetElem => isClickElementsInList(targetElem, blacklist);

        const _targetElem = $(event.target);
        if (isClickBlacklistElement(_targetElem) || (isClickOutsideElement(_targetElem) && isClickOutsideWhitelistElement(_targetElem))) {
            $(document).on('mouseup.click_outside', e => {
                $(document).off('mouseup.click_outside');
                if (e.target === event.target) {
                    self.gbClickOutside.emit({$event: event});
                }
            });
        }
    }

    ngOnDestroy() {
        $(document).off('mousedown.click_outside', this.listener);
    }
}

Но я не могу найтилюбая информация о понижении директив атрибута до angularjs

Как мне этого добиться?

...