Понимание AngularJS ng-src

Как объясняется здесь, директива angularjs ng-src используется для предотвращения загрузки браузером ресурса (например, изображения) до того, как рули получат разобран. В настоящее время я использую следующий код:

<div ng-controller="MyCtrl">
  <img ng-src="http://localhost:8081/media/{{ path }}" />
</div>

Со следующим JS:

function MyCtrl($scope, $timeout) {
    $timeout(function () {
        $scope.path = 'images/23694c70-04d7-11e3-9ba8-73fb00de24c4.png';
    }, 1000);
};

Путь извлекается из веб-службы. Из-за этой задержки браузер пытается загрузить http://localhost:8081/media/, что вызывает 404. После того как путь будет восстановлен, браузер выдает правильный запрос и загружает изображение.

Каков предпочтительный метод предотвращения загрузки любых ресурсов, пока все данные не будут готовы?

См. jsfiddle для примера, иллюстрирующего мою ситуацию.

Спасибо,

Мартейн

Ответ 1

Поместите весь путь в переменную $scope. Таким образом ng-src будет ждать, пока вы предоставите ему полностью разрешенный путь к изображению:

<div ng-controller="MyCtrl">
  <img ng-src="{{ path }}" />
</div>

function MyCtrl($scope, $timeout) {
    var path = 'https://si0.twimg.com/profile_images/';
    $timeout(function () {
        $scope.path = path + '2149314222/square.png';
    }, 1000);
};

FIDDLE

Ответ 2

Информация по примеру

Возьмем этот blogitem directive. В приведенных выше примерах уже показано, как установить значение по умолчанию.

HTML:

<blogitem ng-repeat="item in items" 
          bg-src="{{ item.image }}" 
          caption="{{ item.title }}"/>

JS:

.directive( 'blogitem', function()
{
    return {
        restrict    : 'E',
        templateUrl : 'js/app/directives/blogitem.html',
        replace     : true,
        // pass these two names from attrs into the template scope
        scope       : {
            intro : '@',
            bgSrc : '@'
        }
    }
} )

HTML-шаблон:

<article>
    <img ng-src="{{ bgSrc }}"/>
    <p>{{ intro }}</p>
</article>

Надеюсь, это поможет вам понять ng-src.

Ответ 3

Я тоже попал в эту же проблему. Одна вещь, которую я заметил, это то, что если значение для ng-src undefined, то img не будет извлечен. Поэтому я создал метод утилиты для concat двух аргументов и возвращает значение тогда и только тогда, когда определены оба аргумента. См. Ниже.

<div ng-controller="MyCtrl">
  <img ng-src="{{MyUtil.strConcat('http://localhost:8081/media/', path)}}" />
</div>

myApp.factory('MyUtil', function() {
    return {
        strConcat: function(str1, str2) {
            return (angular.isDefined(str1) && angular.isDefined(str2)) ? 
                (str1 + str2) : undefined;
        }
    }
});

function MyCtrl($scope, $timeout, MyUtil) {
    $scope.MyUtil = MyUtil;
...
}

FIDDLE

Ответ 4

Вы можете установить ng-src в пустую строку, если данные еще не заполнены:

<div ng-controller="MyCtrl">
  <img data-ng-src="{{ path && 'http://localhost:8081/media/'+path || '' }}" />
</div>

когда path не инициализировано, условие будет короткозамкнуто и перейти к части or и установить data-ng-src в '' (пустая строка), таким образом, не ударяя по серверу.

Ответ 5

В последнее время вы можете оценить его следующим образом:

ng-src="{{ methodThatReturnsString() }}"

Ответ 6

Я уверен, что 100% работает

Сначала вы должны сделать свой запрос следующим образом

select (select '../Images/'|| T_LANG2_NAME ||'.png' T_LANG2_NAME from T04222_T where T_LOG_ID = T04220.T_C_STATUS) TIMER from T04220 
where T_PAT_NO = '89004331' group by T_C_STATUS 
having max(T_ARRIVAL_DATE) = (select max(T_ARRIVAL_DATE) from T04220 where T_PAT_NO = '89004331');) then you write Code for Controller like this ( if (scope.T_PAT_NO) {
                debugger;
                $http({
                        method: 'POST',
                        url: '/T04205/GetTimerImage',
                        data: JSON.stringify({ PatientCode: scope.T_PAT_NO })
                    }).
                    success(function (data) {
                        debugger;
                        var newDataJSON = JSON.parse(data);

                        scope.TIMER = newDataJSON[0].TIMER;

                    });

тогда html-код, подобный этому

<input id="imTimer" type="image" src="{{TIMER}}" style="width: 80px;height: 80px" />