在指令链接功能中动态添加 ng-click

我正在尝试创建一个指令，允许将元素定义为可点击或不可点击，并且定义如下：

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

我希望生成的 HTML 为：

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

我的指令实现如下所示：

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

我可以看到，添加新属性后，Angular 不知道ng-click，所以它不会发射。我尝试添加一个$compile设置属性后，但会导致无限链接/编译循环。

我知道我可以检查里面onHandleClick()函数如果isClickable值为true，但我很好奇如何通过动态添加来做到这一点ng-click事件，因为我可能需要与多个其他人一起处理这个事件ng-*指令，我不想增加不必要的开销。有任何想法吗？

更好的解决方案（新）：

读完后角度文档 http://docs.angularjs.org/api/ng/service/%24compile我遇到过这个：

您可以将模板指定为表示模板的字符串或指定为 函数接受两个参数 tElement 和 tAttrs（在 下面的编译函数 api）并返回一个表示的字符串值 模板。

所以我的新指令看起来像这样：（我相信这是处理此类事情的适当“角度”方式）

app.directive('page', function() {
    return {
        restrict: 'E',
        replace: true,
        template: function(tElement, tAttrs) {
            var isClickable = angular.isDefined(tAttrs.isClickable) && eval(tAttrs.isClickable) === true ? true : false;

            var clickAttr = isClickable ? 'ng-click="onHandleClick()"' : '';

            return '<div ' + clickAttr + ' ng-transclude></div>';
        },
        transclude: true,
        link: function(scope, element, attrs) {
            scope.onHandleClick = function() {
                console.log('onHandleClick');
            };
        }
    };
});

请注意新的模板函数。现在，我在编译该函数之前操作该函数内的模板。

替代解决方案（旧）：

Added replace: true摆脱重新编译指令时的无限循环问题。然后在链接函数中，我只是在添加新属性后重新编译元素。但有一点需要注意，因为我有一个ng-transclude指令在我的元素上，我需要删除它，这样它就不会尝试在第二次编译时包含任何内容，因为没有任何内容可以包含。

这就是我的指令现在的样子：

app.directive('page', function() {
    return {
        restrict: 'E',
        replace: true,
        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()');
                element.removeAttr('ng-transclude');
                $compile(element)(scope);
            }

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

不过，我认为第二次重新编译模板并不理想，所以我觉得在第一次编译模板之前仍然有办法做到这一点。