Estou tentando criar uma diretiva que permita que um elemento seja definido como clicável ou não, e seria definido assim:

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

Quero que o HTML resultante seja:

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

Minha implementação de diretiva é assim:

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

Percebo que, depois de adicionar o novo atributo, o Angular não sabe sobre ong-click, portanto, não está disparando. Eu tentei adicionar um$compile depois que o atributo é definido, mas causa um loop infinito de link / compilação.

Eu sei que posso apenas verificar dentro doonHandleClick() função se oisClickable o valor étrue, mas estou curioso para saber como fazer isso adicionando dinamicamente umng-click evento, porque talvez eu precise fazer isso com vários outrosng-* diretivas e eu não quero adicionar sobrecarga desnecessária. Alguma ideia?