Estoy tratando de crear una directiva que permita que un elemento se defina como cliqueable o no, y se definiría así:

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

Quiero que el HTML resultante sea:

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

Mi implementación de directiva se ve así:

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

Puedo ver que después de agregar el nuevo atributo, Angular no sabe sobre elng-click, por lo que no está disparando. Traté de agregar un$compile después de establecer el atributo, pero provoca un enlace infinito / bucle de compilación.

Sé que puedo revisar el interior delonHandleClick() funcionar si elisClickable el valor estrue, pero tengo curiosidad por saber cómo hacer esto al agregar dinámicamente unng-click evento porque es posible que tenga que ver con esto con varios otrosng-* directivas y no quiero agregar gastos generales innecesarios. ¿Algunas ideas?