在指令的链接函数中动态添加ng-click。

15 浏览
0 Comments

在指令的链接函数中动态添加ng-click。

我试图创建一个指令，允许元素被定义为可点击或不可点击，并且可以这样定义：


    混合的元素...

我希望生成的HTML如下所示：


    混合的元素...

我的指令实现如下：

app.directive('page', function() {
    return {
        restrict: 'E',
        template: '',
        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-*指令中这样做，我不想增加不必要的开销。有什么想法吗？

0