范围图像 URL 未更新并显示在视图中（AngularJS）答案

【问题标题】：Scope image URL not updated & showing in view (AngularJS)范围图像 URL 未更新并显示在视图中（AngularJS）
【发布时间】：2017-03-02 02:23:00
【问题描述】：

我是 AngularJS 的新手，我正在尝试从 Google Firebase 中检索一个放在范围变量中的图像链接。当我在加载它之前使用不同的控制器执行操作中的 URL 检索时，这有效。但是，在此控制器中检索它时，我的 div 不知何故不想显示图像。我已经用一个简单的 ng-bind 检查了范围变量是否已更新，并且确实如此。但是，视图中的图片 div 保持为空。有谁知道如何让我的视图显示图像？

控制器：

$scope.profilepicture = null;

var storageRef = firebase.storage().ref();
var path = "profilepictures/" + userFactory.getUser().uid + "/profilepicture";
var profilePicRef = storageRef.child(path);

profilePicRef.getDownloadURL().then(function(url) {
    $scope.$apply(function(){
        $scope.profilepicture = url;
    });
}).catch(function(error) {
});

查看：

<div ng-click="getImage()" ng-style="{'background-image' : 'url({{profilepicture}})'}" style="width:100px; etc...></div>

【问题讨论】：

你能创建一个 Fiddle（带有一些示例 Firebase 帐户）吗？
我真的不认为应该在那里找到解决方案。检索到 URL 并且正确。它只是不再更新 div 来查找图像，所以我想知道如何让我的 div 元素重新加载并反映我的范围变量更改。
我也不这么认为，只是想玩点儿东西，因为我不知道现在出了什么问题。

标签： javascript angularjs firebase firebase-storage

【解决方案1】：

ng-style="{'background-image' : 'url(' + profilepicture + ')'}"

我刚刚发现了问题。 ng-style url 需要这样写：' + value + '

感谢您的帮助:)

【讨论】：

【解决方案2】：

通过从那里删除大括号尝试这样做，但只需确保您获得正确的个人资料图片值。

<div ng-click="getImage()" ng-style="{'background-image' : 'url(profilepicture)'}" style="width:100px; etc...></div>

【讨论】：

我已经尝试过了，但遗憾的是它也不起作用。 “{{}}”在我之前的实现中也有效，其中 url 存储在工厂中。