Javascript 通过angularJS指令模糊HTML中的标题元素

我有一个钮扣。单击该按钮时，我想模糊HTML

标题中的所有内容

我想通过指令来实现这一点，看起来是这样的

.directive('setUpBlur', function(){
        return {
            restrict: 'A',
            scope: {
                classElement: '@'
            },
            link: function(scope, element, attrs) {
                element.find(scope.classElement).css("-webkit-filter", "blur(10px)");
            }
       };

    });

标题中的按钮如下所示：

<button set-up-blur class-element="header">Generate</button>

我缺少什么？
试试这个：

.directive('setUpBlur', function($rootElement){
        return {
            restrict: 'A',
            scope: {
                classElement: '@'
            },
            link: function(scope, element, attrs) {
                $rootElement.find(scope.classElement).css("-webkit-filter", "blur(10px)");
            }
       };

    });

您是否正在尝试按css类查找？element.find（）是否返回任何内容？这很有效-谢谢：）但是为什么
$rootElement
。为什么不
元素
？元素指的是按钮元素，“find”查找子元素。我假设你的scope.classElement不是Button的子元素。另外，如果我只想在按下按钮后执行此操作？我试图在控制器中创建一个函数，并在html中单击ng，但是dom相关的东西应该在指令中吗？问题是这个指令是直接调用的
.directive('setUpBlur', function($rootElement){
        return {
            restrict: 'A',
            scope: {
                classElement: '@'
            },
            link: function(scope, element, attrs) {
                $rootElement.find(scope.classElement).css("-webkit-filter", "blur(10px)");
            }
       };

    });