$ rootScope没有更新值

Question

我有一个带有html代码的编辑个人资料页面，如下所示：

<img ng-src="{$root.user.userProfilePic}" />

其中$rootScope.user.userProfilePic = "imageUrlHere" />

但是，当我在同一页面中使用控制器再次更新userProfilePic时，配置文件图像仍然保持不变。如果我使用$scope，则不会发生这种情况。我怎么能解决它？

UpdateUserProfilePicApi.then(function (res) {
    $rootScope.user.userProfilePic = res.imgUrl;
});

Answer 1

你缺少{{double braces}}，试试这个：

<img ng-src="{{user.userProfilePic}}" />

ng-src docs

Answer 2

无需使用 $ root 。请尝试：

<img ng-src="{{user.userProfilePic}}" />

这为您提供了预期的结果，因为user.userProfilePic在角度加载后被评估并替换为其值。

<img ng-src="{$root.user.userProfilePic}" />

但是有了这个，浏览器会尝试加载名为$ root.user.userProfilePic的图像，这会导致请求失败。您可以在浏览器的控制台中查看此内容。

Answer 3

您不需要使用$ root，因为可以从所有视图访问$ rootScope。 从代码中删除$ root。

<img ng-src="{{user.userProfilePic}}" />