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调用init来控制我的控制器中的数据：

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中的原语），所以没有双向绑定发生，因此即使你的函数正在解析，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;
}

AngularJS ng-src和ng-attr-src不适用于IMG标签

1 个答案: