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

Question

我有一个按钮。单击该按钮时，我想模糊HTML header元素中的所有内容。

我想通过指令完成此操作，看起来像这样

.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>

但没有任何反应：

如果我编写以下CSS，它可以工作：

header {
    -webkit-filter: blur(10px);
}

我错过了什么？

Answer 1

试试这个：

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

    });