AngularJS ng-style vs.style - ng-style 不会自动引用

Question

我有以下代码上传我的个人资料图片：

file.upload.then(function (response) {
                $timeout(function () {
                    file.result = response.data;
                    vm.currentUser.profileImagePath = response.data.profileImagePath;
                    $scope.$apply();
                });
            }, function (re ...

使用此代码，图像在上传后刷新/重新加载并且工作正常

<div class="userProfileItem userProfileImage" style="background-image: url(api/files/profileimage/{{vm.currentUser.profileImagePath}}/)">

除了我有时会收到以下浏览器错误：

403 禁止 - http://localhost:8082/api/files/profileimage/%7B%7Bvm.currentUser.profileImagePath%7D%7D/"

因此，我将代码更改为底部的这个代码。但是，由于代码位于底部，图像不会自动刷新。

<div class="userProfileItem userProfileImage" ng-style="{'background-image': 'url(api/files/profileimage/{{vm.currentUser.profileImagePath}}/)'}">

我现在的问题是如何解决这个问题？

Answer 1

您在表达式中{{}}了ng-style插值，这在表达式中不是必需的。您可以在那里直接访问范围变量，使用串联来形成表达式。

<div class="userProfileItem userProfileImage" 
  ng-style="{'background-image': 'url(api/files/profileimage/'+ vm.currentUser.profileImagePath +'/)'}">