Angular和AngularJS混合模式-降级属性指令

时间:2018-12-20 13:13:36

标签: angularjs angular angular-hybrid

我正在尝试将此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的任何信息

我该如何实现?

0 个答案:

没有答案