Загрузка изображения через $ http приводит к бесконечному $ digest

Question

Я пытаюсь загрузить изображение в div с помощью функции в ng-стиле , и это вызывает бесконечный цикл $ digest вдоль линий этого.

<div ng-style="userPicture(user.id)">
    <i class="fa fa-user"></i>
</div>

$scope.userPicture = function(userId) {
    var deferred = $q.defer();

    var url = '/api/picture/' + userId;
    $http.get(url).then(function (response) {
        if (response.data.result && response.data.result.picture){
            var picture = response.data.result.picture.replace("?t=small", "");
            deferred.resolve({
                'background-image': "url('" + picture + "')",
                'color': 'transparent'
            });
        }
    });

    return deferred.promise;
}

Ошибка, отображаемая в консоли

Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.5.11/$rootScope/infdig?p0=10&p1=%5B%5D

Я прочитал объяснение ошибки в ссылке, и похоже, что это вызвано функцией, заставляющей AngularJS думать, что значение изменилось бесконечно, что вызывает дайджест.

Как мне создать функцию, которая принимает параметр и возвращает стиль таким образом?

Answer 1

Директива ng-style не разворачивает обещания.Это было удалено из среды AngularJS много лет назад.

Вместо того, чтобы HTML получал данные с сервера, сделайте это в контроллере:

<div ng-repeat="user in users">
    <div ng-style="userPicStyleHash[user.id]">
        <i class="fa fa-user"></i>
    </div>
</div>

$scope.userPicStyleHash = {};

$scope.users.forEach(user => getStyle($scope.userPicStyleHash,user.id));

function getStyle(obj,userId) {
    var url = '/api/picture/' + userId;
    $http.get(url).then(function (response) {
        var result = response.data.result;
        if (result && result.picture){
            var picture = result.picture.replace("?t=small", "");
            var style = {
                'background-image': "url('" + picture + "')",
                'color': 'transparent'
            };
            obj[userId] = style;
        }
    });
}