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

Question

我有一个普通的JS文件，其中包含一些实用程序功能。这些实用程序功能之一是返回AngularJS组件<tooltip>。我知道这不是很好的编码实践，但这是我必须使用的方法。我有一个问题：

当我单击onClickDescription()时，不会触发

<p>。但是，它是由$onInit()触发的。

utility.js

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();
}

tooltip.js

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

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

tooltip.html

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