javascript - 通过angularJS指令模糊HTML中的 header 元素

我有一个按钮。单击该按钮时，我想模糊HTMLheader元素中的所有内容。
我想通过指令来完成，看起来像这样

.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);
}

我错过了什么？

最佳答案

试试这个：

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

    });

关于javascript - 通过angularJS指令模糊HTML中的 header 元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31728774/