AngularJS ng-src 和 ng-attr-src 在 IMG 标签中不起作用

Question

我正在尝试从 MongoDB 返回的数据中的 URL 加载图像。在我的用户的个人资料编辑页面上，他们可以编辑某些详细信息，例如他们的电子邮件地址和他们的用户个人资料图片。电子邮件地址数据绑定得很好，但是他们的个人资料图像的 ng-src 永远不会解析，因此它始终是空白的，即使用户对象包含它应该绑定的正确 URL。

有问题的 HTML：

<div ng-controller="userCtrl">
  <img ng-src="{{currentUser.profileImage}}" src="{{currentUser.profileImage}}" class="img-responsive" alt="Profile Image"/>
  <input name="name" type="text" placeholder="Enter Name" class="form-control" ng-model="currentUser.name"/>
</div>

AngularJS 调用在我的控制器中初始化数据：

function UserCtrl($scope, $routeParams, $timeout, userService) {
  $scope.init = function() {
    userService.getCurrentUser().then(function(dataResponse) {
      if (dataResponse.data) {
        dataResponse.data.profileImage = "images/" + dataResponse.data.profileImage;
        userService.setCurrentUser(dataResponse.data);
        $scope.currentUser = dataResponse.data;
      }
    });
  }
  $timeout($scope.init());
}

我已经尝试了可以​​找到参考的括号、函数调用和延迟加载方法的所有排列（因此那里的超时使用情况）。我很难理解为什么 currentUser.name 可以很好地解析，但 currentUser.profileImage 没有。我不知道我到底缺少什么才能让这项工作像它应该的那样工作。任何帮助将不胜感激！

Answer 1

首先你应该使用 ngRoute 中的 resolve 方法来确保你的数据被解析而不是使用 $timeout。

我认为这里发生的事情是，由于 currentUser.profileImage 是一个字符串（这是 javascript 中的一个原语），因此没有发生 2 路绑定，因此即使您的函数正在解析，ui 已经将其计算为不明确的。在 ngRoute 中使用 resolve 将确保您的页面在您需要的所有内容都得到解决之前不会加载。

.when("/user", {
    templateUrl: "users.html",
    controller: "UserCtrl",
    resolve: {
        currentUser: function(userService){
            var currentUser = null;
            userService.getCurrentUser().then(function(dataResponse) {
                if (dataResponse.data) {
                    dataResponse.data.profileImage = "images/" + dataResponse.data.profileImage;
                    userService.setCurrentUser(dataResponse.data);
                    currentUser = dataResponse.data;
                }
            });

            return currentUser;
        }
    }
}

现在在您的控制器中，您可以简单地执行此操作并让您查看相同的内容，因为 ngRoute 将处理解析：

function UserCtrl($scope, currentUser) {
    $scope.currentUser = currentUser;
}