javascript - Angular 指令中的 element.css 不更新元素的 css

Question

因此，我编写了一个自定义指令，用于在用户上传新头像时更改其头像。它会监视照片 url 的变化，并在发生变化时将元素的背景图像设置为新图像。

一切正常，直到 element.css() 调用。出于某种原因，它似乎只是跳过了那些。

    client.directive('myDirective', function(){
    return {
        scope: { profilePhoto: '=myDirective' },
        link: function(scope, element, attrs){
            scope.$watch("profilePhoto",function(newValue,oldValue) {
                console.log(newValue) //This logs the correct value
               var url = newValue;
             if (!url) url = "../img/profile_default.png"
             element.css({
                'background-image': 'url(' + url +')', //never updates
                'background-size': 'cover',
                'background-repeat': 'no-repeat'
             })
            })
        }
    }
});

这是怎么回事？

编辑:请注意，第一次通过代码正确设置了背景图像，但是当我在调试器中逐步执行时，就好像 $watch 变量更改时它甚至没有执行。

Answer 1

我假设这个 CSS 代码是错误的。试试这个(注意 url 参数):

element.css({
    'background-image': 'url("' + url +'")',
    'background-size': 'cover',
    'background-repeat': 'no-repeat'
    })