Fügen Sie in der Direktivenverknüpfungsfunktion ng-click dynamisch hinzu

Ich versuche, eine Direktive zu erstellen, mit der ein Element als anklickbar oder nicht anklickbar definiert werden kann und die folgendermaßen definiert wird:

<page is-clickable="true">
    transcluded elements...
</page>

Ich möchte, dass der resultierende HTML-Code wie folgt lautet:

<page is-clickable="true" ng-click="onHandleClick()">
    transcluded elements...
</page>

Meine Direktivenimplementierung sieht folgendermaßen aus:

app.directive('page', function() {
    return {
        restrict: 'E',
        template: '<div ng-transclude></div>',
        transclude: true,
        link: function(scope, element, attrs) {
            var isClickable = angular.isDefined(attrs.isClickable) && scope.$eval(attrs.isClickable) === true ? true : false;

            if (isClickable) {
                attrs.$set('ngClick', 'onHandleClick()');
            }

            scope.onHandleClick = function() {
                console.log('onHandleClick');
            };
        }
    };
});

Ich kann sehen, dass Angular nach dem Hinzufügen des neuen Attributs nichts über das Attribut weißng-clickEs wird also nicht geschossen. Ich habe versucht, eine hinzuzufügen$compile nachdem das Attribut gesetzt ist, aber es verursacht eine unendliche Link / Compile-Schleife.

Ich weiß, ich kann nur in der überprüfenonHandleClick() funktion wenn dieisClickable Wert isttrue, aber ich bin gespannt, wie man das machen würde, wenn man dynamisch eine hinzufügtng-click event weil ich das mit mehreren anderen machen mussng-* Direktiven und ich möchte nicht unnötigen Overhead hinzufügen. Irgendwelche Ideen?