AngularJS-使用$compile时无法访问ng click-in组件

我有一个普通的JS文件，其中包含一些实用程序函数。这些实用程序函数之一是返回AngularJS组件

。我知道这不是很好的编码实践，但这是我必须处理的问题。我有一个问题：

当我单击

时，

onClickDescription（）

不会触发。但是，它由

$onInit（）

触发

utility.js 函数getTooltipHtml（$compile，$scope）{ const scope=$scope.$new（）； scope.description=getDescription（）； 常量html=''； 常量元素=$compile（angular.element（html））（作用域）； 作用域：$apply（）； return-element.html（）； } tooltip.js

类工具提示{
$onInit（）{
这个.onClickDescription（）；
}
onClickDescription（）{
log（'onClickDescription（）'）；
}
}
导出默认值{
绑定：{
description:“执行ng click=“alert（）”？element.html（）返回字符串时是否发出警报？您可以将其附加到某个位置，但所有出价将永远丢失。@MokkyMiah alert fire不发出警报。”fire@PetrAveryanov有没有办法防止绑定丢失？或者有一个变通方法？@Jon return元素并使用它
function getTooltipHtml($compile, $scope) {
    const scope = $scope.$new();
    scope.description = getDescription();
    const html = '<tooltip description="{description}"></tooltip>';
    const element = $compile(angular.element(html))(scope);
    scope.$apply();
    return element.html();
}

class Tooltip {
    $onInit() {
        this.onClickDescription();
    }

    onClickDescription() {
        console.log('onClickDescription()');
    }
}
export default {
    bindings: {
        description: '<'
    }
}

<div class="tooltip">
    <p ng-click="$ctrl.onClickDescription()">{{ $ctrl.description }}</p>
</tooltip>