Question

我们正在尝试构建使用带有多个插槽的transclude的组件。

该组件看起来像这样：

unicodeChars

它的html为：

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

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

    },
};

export default PopBoxComponent;

其用途如下：

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

现在，所有内容均已渲染。但是，我需要将事件附加到已包含的按钮上。

是否可能获得对被包含元素的访问？

也许还有另一个选项可以将事件附加到调用组件内部函数的按钮上。

更多详细信息

从上面得到的html是：

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

因此，如果我将事件添加到<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>元素而不是按钮上。

如何在按钮上设置它？

如何在AngularJS组件中获取对包含元素的引用

0 个答案: