通过 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)");
            }
       };

    });