AngularJS ng-src и ng-attr-src не работают в теге IMG

Question

Я пытаюсь загрузить изображение из URL-адреса в данные, возвращаемые MongoDB. На странице редактирования профиля моего пользователя они могут редактировать некоторые данные, такие как их адрес электронной почты, и изображение их профиля пользователя. Данные адреса электронной почты являются обязательными, однако 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, чтобы убедиться, что ваши данные разрешены вместо использования $ timeout.

Я думаю, что здесь происходит то, что поскольку currentUser.profileImage является строкой (которая является примитивом в javascript), нет никакой двусторонней привязки, поэтому, хотя ваша функция разрешима, ui уже вычислил ее как неопределенный. Использование решения в ngRoute гарантирует, что ваша страница не будет загружаться, пока не будет разрешено все, что вам нужно.

.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; 
}