Как получить ссылку на включенный элемент в компоненте AngularJS - PullRequest
Новая
       65

Как получить ссылку на включенный элемент в компоненте AngularJS

0 голосов
/ 01 февраля 2019

Мы пытаемся создать компонент, который использует transclude с несколькими слотами.

Компонент выглядит примерно так: 

import templateUrl from './pop-box.html';
import './pop-box.scss';

const PopBoxComponent = {
    bindings: {},
    transclude: {
        'trigger': 'popBoxTrigger',
    },
    templateUrl,
    controller: class PopBoxComponent {

    },
};

export default PopBoxComponent;

С html как: 

<div class="pop-box">
    <ng-transclude ng-transclude-slot="trigger"></ng-transclude>
</div>

Он предназначен для использования следующим образом: 

<ps-pop-box>
        <pop-box-trigger>
            <button type="button"class="btn btn-transparent">
                Button
            </button>
        </pop-box-trigger>
    </ps-pop-box>

Теперь все передано в собственность.Но мне нужно прикрепить событие к транскрипционной кнопке.

Возможно ли получить доступ к транскрипционному элементу?

Может быть, есть другая опция для прикрепления события кКнопка, которая вызывает функцию внутри компонента.

Некоторые дополнительные сведения

В результате HTML-код из приведенного выше: 

<ng-transclude ng-transclude-slot="trigger"><pop-box-trigger class="ng-scope">
            <button type="button" data-ng-disabled="$ctrl.disabled" class="btn btn-transparent ng-binding">
                <i class="far fa-user fa-fw"></i>
                Assign
            </button>
        </pop-box-trigger></ng-transclude>

Итак, еслиЯ добавляю событие к <ng-transclude ng-transclude-slot="trigger" on-click="onClick()"></ng-transclude>, оно будет привязано к элементу ng-transclude вместо кнопки.

Как настроить его на кнопку?

...