Question

我想进一步了解指令的工作原理，所以我写了这个简单的指令：

Avraam.directive('whoami',function(){
    return{
        restrict:'A',
        template:"<label id='avraam'>Avraam</label>",
        link:function(scope, element, attrs) {
            var avraam = $(element).find('#avraam');
            $(avraam).hide();

        }
    }
});

人们支持DOM操作应该在指令内完成，所以我想问如何在指令中创建ng-click事件处理程序，当用户点击元素时将被隐藏起来。

Answer 1

ng-click是一个指令，听起来你想在你自己的指令中添加一个点击处理程序。要做到这一点，您只需在链接方法中将处理程序添加到元素中：

Avraam.directive('whoami',function(){
    return{
        restrict:'A',
        template:"<label id='avraam'>Avraam</label>",
        link:function(scope, element, attrs) {
            element.bind("click", function(){
                $(this).hide();
            });
        }
    }
});

Answer 2

如果只需要隐藏元素，可以通过模板中的ngClick和ngHide来实现...

Avraam.directive('whoami',function(){
    return{
        restrict:'A',
        scope: {},
        template:"<label ng-click='hidden = true' ng-hide='hidden' id='avraam'>Avraam</label>"
    }
});

JSFiddle

如果您需要点击处理程序来执行其他工作，可以使用模板中的ngClick来调用范围内的方法...

Avraam.directive('whoami',function(){
    return{
        restrict:'A',
        template:"<label ng-click='doSomething()' id='avraam'>Avraam</label>",
        controller: function ($scope, $element) {
            $scope.doSomething = function () {
                // do work with $element here
                alert($element.text());
            };
        }
    }
});

JSFiddle

这是使用点击处理程序的变体......

Avraam.directive('whoami',function(){
    return{
        restrict:'A',
        template:"<label id='avraam'>Avraam</label>",
        link: function (scope, element) {
            element.on("click", function () {
                alert(element.text());
            });
        }
    }
});

角度指令内的事件处理程序

2 个答案: